Imports and Mappers
import { mapState } from 'vuex'
import { mapMutations } from 'vuex'
import { mapGetters } from 'vuex'
computed: {
...mapState(['user', 'age']
...mapGetters([ 'news' ])
...mapState('teamModuleName', ['id', 'name', 'picture', 'bio'])
),
methods: {
decrement() {
this.DECREMENT({ minus: 2 })
},
...mapMutations(["INCREMENT", "DECREMENT"])
}
State and Getters
computed: {
count () {
return this.$store.state.count
}
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
todosById (id) {
return this.$store.getters.getTodoById(id)
}
}
Mutations
methods: {
increment(amount) {
this.$store.commit('increment', amount)
// or this.$store.commit(Types.mutations.SET_FIRST_THING, amount);
// or this.$store.commit('SET_CURRENT_USER', { token: 'some-token' })
}
}
Actions
methods: {
increment(amount) {
return this.$store.dispatch('increment')
}
increment(amount) {
return this.$store.dispatch('incrementAsync', { amount: 10})
}
}
Modules
State
showPanel1() {
return this.$store.state.helper.showPanel1 ;
},
Getters
this.$store.getters['account/isAdmin']
this.$store.getters['feeders/feedersById'](this.rowData.ac_id);
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
Actions
this.$store.dispatch('account/login')
Mutations
this.$store.commit('account/login')
Arrays
// Update item in array, messes order
[mutationType.UPDATE_CATEGORY] (state, id, category) {
state.categories = [
...state.categories.filter(element => element.id !== id),
category
]
}
https://stackoverflow.com/questions/52132321/array-of-objects-correct-way-of-updating-an-object-within-the-vue-js-ecosystem
import Vue from 'vue'
// find the block's index in the array
const index = state.contentBlocks.findIndex(block => block.id === contentBlock.id)
// using Vue.set
Vue.set(state.contentBlocks, index, contentBlock)
// using Array.splice
state.contentBlocks.splice(index, 1, contentBlock)