[Vue.js] vuex中的命名空间

[Vue.js]Namespacing in vuex

本文关键字：命名空间 vuex Vue js      更新时间：2023-09-26

我试图命名空间模块的getter，突变，动作，我在这里看到这个文档，但它似乎有点模糊。

// types.js
// define names of getters, actions and mutations as constants
// and they are prefixed by the 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'
// define getters, actions and mutations using prefixed names
const todosModule = {
  state: { todos: [] },
  getters: {
    [types.DONE_COUNT] (state) {
      // ...
    }
  },
  actions: {
    [types.FETCH_ALL] (context, payload) {
      // ...
    }
  },
  mutations: {
    [types.TOGGLE_DONE] (state, payload) {
      // ...
    }
  }
}

然后我如何使用模块getter，值组件的突变?

export default {
  data() {
    // like this?
    count: this.$store.getters.DONE_COUNT, 
    // ?
    count: this.$store.getters.todos.DONE_COUNT,
    // ?
    count: this.$store.getters.todosModule.DONE_COUNT,
    // ?
    count: ?,
  },
};

this.$store.getters['todos/DONE_COUNT']
相关文章：