拜读,算是对vuex文档的一个崇赞吧。文档加案例全面,相信vue在GitHub上star日益增多的原因之一。
步入正题,公司项目重构,一直在学习vue官网api。读到vuex项目结构的时候,感觉受益匪浅,特此记录。
Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:
-
应用层级的状态应该集中到单个 store 对象中。
-
提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
-
异步逻辑都应该封装到 action 里面。
只要你遵守以上规则,如何组织代码随你便。如果你的 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 # 产品模块
相信很多用心的初学者会和我 一样,ajax请求放在哪、ul逻辑放在哪、该不该封装接口文档(指项目结构的api文件夹)。当然,会考虑组件复用,是否公用、代码清晰、解耦等问题。在构建项目会应用到
好了好了,就到吧,个人记录。不喜勿喷!!!谢谢