vuex 使用文档小结篇(8)
命名空间
模块内部的action, mutation , 和 getter 现在仍然注册在全局命名空间 这样保证了多个模块能够响应同一 mutation 或 action. 也可以通过添加前缀 或者 后缀的
方式隔离各个模块，以免冲突。
// 定义 getter, action , 和 mutation 的名称为常量，以模块名 ‘todo' 为前缀。
export const DONE_COUNT = 'todos/DONE_COUNT'
export const FETCH_ALL = 'todos/FETCH_ALL'
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
import * as types form '../types'
// 使用添加了解前缀的名称定义， getter, action 和 mutation
const todosModule = {
state : {todo: []},
getters: {
[type.DONE_COUNT] (state) {
}
}
actions: {
[types.FETCH_ALL] (context,payload) {
}
},
mutations: {
[type.TOGGLE_DONE] (state, payload)
}
}
模块动态注册
在store 创建之后，你可以使用 store.registerModule 方法注册模块。
store.registerModule('myModule',{})
模块的状态将是 store.state.myModule.
模块动态注册功能可以使让其他Vue 插件为了应用的store 附加新模块
以此来分割Vuex 的状态管理。
项目结构
Vuex 并不限制你的代码结构。但是它规定了一些需要遵守的规则：
1.应用层级的状态应该集中到单个store 对象中。
2.提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
3.异步逻辑应该封装到action 里面。
只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation、和 getters 分割到单独的文件对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例
├── index.html
├── main.js
├── api │
└── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
内容版权声明：除非注明，否则皆为本站原创文章。