[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; ```