Vuex 目录结构组织

• 1. Vuex 需要遵守的规则
• 2. Vuex 目录结构示例【官方】
• 3. 调整 Vuex 目录结构
• 4. 按照功能模块组织目录结构

1. Vuex 需要遵守的规则

---

Vuex 并不限制你的代码结构，但是，它规定了一些需要遵守的规则

1. 应用层级的状态应该集中到单个 store 对象中。也就是一个应用最好只使用一个 store 对象
2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的
3. 异步逻辑都应该封装到 action 里面

只要遵守以上规则，如何组织代码随你便。store 文件太大时，只需将 action、mutation 和 getter 分割到单独的文件

2. Vuex 目录结构示例【官方】

---

Vuex 官方目录结构示例 : https://v3.vuex.vuejs.org/zh/guide/structure.html

对于大型应用，官方希望把 Vuex 相关代码分割到模块中。下面是项目结构示例 :

1. store
2. ├── index.js # 组装模块并导出 store
3. ├── getters.js # 根级别的 getter
4. ├── actions.js # 根级别的 action
5. ├── mutations.js # 根级别的 mutation
6. └── modules
7. ├── user.js # 用户模块
8. └── shop.js # 商城模块

store/index.js 文件内容

1. import Vue from 'vue'
2. import Vuex from 'vuex'
4. // 导入抽离的 getters、mutations、actions
5. import getters from './getters'
6. import actions from './actions'
7. import mutations from './mutations'
9. // 导入抽离的 modules
10. import user from './modules/user'
11. import shop from './modules/shop'
13. Vue.use(Vuex)
15. const store = new Vuex.Store({
16. state: {},
17. getters,
18. mutations,
19. actions,
20. modules: { user, shop }
21. })
23. export default store

store/getters.js、store/actions.js、store/mutations.js 文件内容

抽离出的 getters、mutations、actions 文件，直接默认导出一个对象即可，以 mutations 为例 :

1. export default {
2. incNum (state, value) {
3. state.num += value
4. }
5. }

store/modules/user.js、store/modules/shop.js 文件内容

1. export default {
2. state: {},
3. getters: {},
4. mutations: {},
5. actions: {}
6. }

3. 调整 Vuex 目录结构

---

可以在上面的目录结构中进行调整:

1. 将 state 也抽离出去
2. 使用 require.context 遍历模块目录

1. import Vue from 'vue'
2. import Vuex from 'vuex'
4. // 将 state 也抽离出去
5. import state from './state'
6. import getters from './getters'
7. import actions from './actions'
8. import mutations from './mutations'
10. // 使用 require.context 遍历模块目录
11. const files = require.context("./modules", false, /\.js$/);
12. const modules = files.keys().reduce((modules, item) => {
13. let key = /^\.\/(.+)\.js$/.exec(item)[1]
14. modules[key] = files(item).default
15. return modules
16. }, {})
18. Vue.use(Vuex)
20. const store = new Vuex.Store({
21. state,
22. getters,
23. mutations,
24. actions,
25. modules
26. })
28. export default store

4. 按照功能模块组织目录结构

---

这是当前我所在公司使用的一种 Vuex 目录结构组织方式

1. store
2. ├── index.js # 组装模块并导出 store
3. └── modules
4. ├── user.js # 用户功能模块
5. └── shop.js # 商城功能模块

store/modules/user.js

1. export const state = {}
2. export const getters = {}
3. export const mutations = {}
4. export const actions = {}

store/index.js

1. import Vue from "vue";
2. import Vuex from "vuex";
4. Vue.use(Vuex);
6. // 组装模块
7. let modules = {
8. state: {},
9. getters: {},
10. mutations: {},
11. actions: {}
12. }
13. const files = require.context("./modules", false, /\.js$/);
14. files.keys().forEach(key => {
15. Object.assign(modules.state, files(key)["state"]);
16. Object.assign(modules.getters, files(key)["getters"]);
17. Object.assign(modules.mutations, files(key)["mutations"]);
18. Object.assign(modules.actions, files(key)["actions"]);
19. });
21. const store = new Vuex.Store(modules);
23. export default store;