MrSunOcean 2020-04-24
只要你遵守以上规则,如何组织代码随你便。
如果你的 store 文件太大,只需将 action、mutation 和 getter 分割到单独的文件。
对于大型应用,我们会希望把 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 # 产品模块
开启严格模式,仅需在创建 store 的时候传入 strict: true:
const store = new Vuex.Store({ // ... strict: true })
在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。不要在发布环境下启用严格模式!以避免性能损失。
类似于插件,我们可以让构建工具来处理这种情况:const store = new Vuex.Store({ // ... strict: process.env.NODE_ENV !== ‘production‘ })