DAY14 资料室--Vuex项目结构

前言

Vuex 并不会限制我们的代码结构，只是有三大原则需要遵守：

1. 应用层级的状态应该集中到单个 store 对像中。
2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
3. 非同步行为都应该封装到 action 里面。

Vuex 项目结构

如果 store 档案太大，其实还可以将 action、mutation 和 getter 都分割为独立的文件。
也可以将模组拆分出来，成为个别独立的模组。

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # store 主文件，组装模型的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模组
        └── products.js   # 产品模组

像这样子，就可以将档案都分门别类拆分出来，对於大型应用较为容易管理。

结语

不好意思，最近找到一份暂时的专案工作，今天非常忙碌，所以更新内容有点少有点浅。
其实有点犹豫要不要继续挑战，但...还不想这麽容易放弃，可是又刚刚才到家真的忙不过来，只好减量更新。
这两天会审慎思考，并调整时间安排，敬请见谅！