[TOC] #### 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](https://v3.vuex.vuejs.org/zh/guide/structure.html) 对于大型应用，官方希望把 Vuex 相关代码分割到模块中。下面是项目结构示例 : ``` store ├── index.js # 组装模块并导出 store ├── getters.js # 根级别的 getter ├── actions.js # 根级别的 action ├── mutations.js # 根级别的 mutation └── modules ├── user.js # 用户模块 └── shop.js # 商城模块 ``` **store/index.js** 文件内容 ```javascript import Vue from 'vue' import Vuex from 'vuex' // 导入抽离的 getters、mutations、actions import getters from './getters' import actions from './actions' import mutations from './mutations' // 导入抽离的 modules import user from './modules/user' import shop from './modules/shop' Vue.use(Vuex) const store = new Vuex.Store({ state: {}, getters, mutations, actions, modules: { user, shop } }) export default store ``` **store/getters.js**、**store/actions.js**、**store/mutations.js** 文件内容 抽离出的 getters、mutations、actions 文件，直接默认导出一个对象即可，以 mutations 为例 : ```javascript export default { incNum (state, value) { state.num += value } } ``` **store/modules/user.js**、**store/modules/shop.js** 文件内容 ```javascript export default { state: {}, getters: {}, mutations: {}, actions: {} } ``` #### 3. 调整 Vuex 目录结构 --- 可以在上面的目录结构中进行调整: 1\. 将 state 也抽离出去 2\. 使用 require.context 遍历模块目录 ```javascript import Vue from 'vue' import Vuex from 'vuex' // 将 state 也抽离出去 import state from './state' import getters from './getters' import actions from './actions' import mutations from './mutations' // 使用 require.context 遍历模块目录 const files = require.context("./modules", false, /\.js$/); const modules = files.keys().reduce((modules, item) => { let key = /^\.\/(.+)\.js$/.exec(item)[1] modules[key] = files(item).default return modules }, {}) Vue.use(Vuex) const store = new Vuex.Store({ state, getters, mutations, actions, modules }) export default store ``` #### 4. 按照功能模块组织目录结构 --- 这是当前我所在公司使用的一种 Vuex 目录结构组织方式 ``` store ├── index.js # 组装模块并导出 store └── modules ├── user.js # 用户功能模块 └── shop.js # 商城功能模块 ``` store/modules/user.js ```javascript export const state = {} export const getters = {} export const mutations = {} export const actions = {} ``` store/index.js ```javascript import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); // 组装模块 let modules = { state: {}, getters: {}, mutations: {}, actions: {} } const files = require.context("./modules", false, /\.js$/); files.keys().forEach(key => { Object.assign(modules.state, files(key)["state"]); Object.assign(modules.getters, files(key)["getters"]); Object.assign(modules.mutations, files(key)["mutations"]); Object.assign(modules.actions, files(key)["actions"]); }); const store = new Vuex.Store(modules); export default store; ```