Vuex 应用结构


实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则:

  1. 应用级的状态集中放在 store 中。

  2. 改变状态的唯一方式是提交mutations,这是个同步的事务。

  3. 异步逻辑应该封装在action 中。

只要你遵循这些规则,怎么构建你的项目的结构就取决于你了。如果你的 store 文件非常大,仅仅拆分成 action、mutation 和 getter 多个文件即可。

对于稍微复杂点的应用,我们可能都需要用到模块。下面是一个简单的项目架构:

  1. ├── index.html
  2. ├── main.js
  3. ├── api
  4. └── ... # 这里发起 API 请求
  5. ├── components
  6. ├── App.vue
  7. └── ...
  8. └── store
  9. ├── index.js # 组合 modules export store
  10. ├── actions.js # action
  11. ├── mutations.js # mutations
  12. └── modules
  13. ├── cart.js # cart 模块
  14. └── products.js # products 模块

关于更多,查看 购物车实例