Trying to organize modules' getters, mutations, and actions with namespacing can be a bit challenging. I came across this document, but it didn't provide clear enough information for me.
// types.js
// Constants for namespacing getters, actions, and mutations
// Prefixed by module name `todos`
export const DONE_COUNT = 'todos/DONE_COUNT'
export const FETCH_ALL = 'todos/FETCH_ALL'
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
// modules/todos.js
import * as types from '../types'
// Using prefixed names for getters, actions, and mutations
const todosModule = {
state: { todos: [] },
getters: {
[types.DONE_COUNT] (state) {
// ...
}
},
actions: {
[types.FETCH_ALL] (context, payload) {
// ...
}
},
mutations: {
[types.TOGGLE_DONE] (state, payload) {
// ...
}
}
}Now the question is, how do I utilize moduled getters and mutations in Vue components?
export default {
data() {
count: this.$store.getters.DONE_COUNT,
count: this.$store.getters.todos.DONE_COUNT,
count: this.$store.getters.todosModule.DONE_COUNT,
count: ?
},
};