Vuex

应用程序结构

Vuex 并没有真正限制你如何构建代码。相反，它强制执行一组高级原则

  1. 应用程序级状态集中在存储中。

  2. 改变状态的唯一方法是提交 **mutation**，它们是同步事务。

  3. 异步逻辑应该封装在 **action** 中，并且可以与 **action** 组合。

只要你遵循这些规则，你就可以自由地构建你的项目。如果你的存储文件变得太大，只需将 action、mutation 和 getter 分割到不同的文件中。

对于任何非平凡的应用程序，我们可能需要利用模块。以下是一个示例项目结构

├── index.html
├── main.js
├── api
│   └── ... # abstractions for making API requests
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # where we assemble modules and export the store
    ├── actions.js        # root actions
    ├── mutations.js      # root mutations
    └── modules
        ├── cart.js       # cart module
        └── products.js   # products module

作为参考，请查看 购物车示例。