Vuex 应用结构

优质

小牛编辑

153浏览

2023-12-01

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

应用级的状态集中放在 store 中。
改变状态的唯一方式是提交mutations，这是个同步的事务。
异步逻辑应该封装在action 中。

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

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

├── index.html
├── main.js
├── api
│   └── ... # 这里发起 API 请求
├── components
│   ├── App.vue
│   └── ...
└── store
   ├── index.js   # 组合 modules 、export store
   ├── actions.js # 根 action
   ├── mutations.js      # 根 mutations
   └── modules
├── cart.js# cart 模块
└── products.js   # products 模块

关于更多，查看购物车实例。