[TOC] #### 1. Vuex 需要遵守的規(guī)則 --- Vuex 并不限制你的代碼結(jié)構(gòu)，但是，它規(guī)定了一些需要遵守的規(guī)則 1\. 應(yīng)用層級(jí)的狀態(tài)應(yīng)該集中到單個(gè) store 對象中。也就是一個(gè)應(yīng)用最好只使用一個(gè) store 對象 2\. 提交 **mutation** 是更改狀態(tài)的唯一方法，并且這個(gè)過程是同步的 3\. 異步邏輯都應(yīng)該封裝到 **action** 里面 只要遵守以上規(guī)則，如何組織代碼隨你便。store 文件太大時(shí)，只需將 action、mutation 和 getter 分割到單獨(dú)的文件 #### 2. Vuex 目錄結(jié)構(gòu)示例【官方】 --- Vuex 官方目錄結(jié)構(gòu)示例 : [https://v3.vuex.vuejs.org/zh/guide/structure.html](https://v3.vuex.vuejs.org/zh/guide/structure.html) 對于大型應(yīng)用，官方希望把 Vuex 相關(guān)代碼分割到模塊中。下面是項(xiàng)目結(jié)構(gòu)示例 : ``` store ├── index.js # 組裝模塊并導(dǎo)出 store ├── getters.js # 根級(jí)別的 getter ├── actions.js # 根級(jí)別的 action ├── mutations.js # 根級(jí)別的 mutation └── modules ├── user.js # 用戶模塊 └── shop.js # 商城模塊 ``` **store/index.js** 文件內(nèi)容 ```javascript import Vue from 'vue' import Vuex from 'vuex' // 導(dǎo)入抽離的 getters、mutations、actions import getters from './getters' import actions from './actions' import mutations from './mutations' // 導(dǎo)入抽離的 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** 文件內(nèi)容 抽離出的 getters、mutations、actions 文件，直接默認(rèn)導(dǎo)出一個(gè)對象即可，以 mutations 為例 : ```javascript export default { incNum (state, value) { state.num += value } } ``` **store/modules/user.js**、**store/modules/shop.js** 文件內(nèi)容 ```javascript export default { state: {}, getters: {}, mutations: {}, actions: {} } ``` #### 3. 調(diào)整 Vuex 目錄結(jié)構(gòu) --- 可以在上面的目錄結(jié)構(gòu)中進(jìn)行調(diào)整: 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. 按照功能模塊組織目錄結(jié)構(gòu) --- 這是當(dāng)前我所在公司使用的一種 Vuex 目錄結(jié)構(gòu)組織方式 ``` store ├── index.js # 組裝模塊并導(dǎo)出 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; ```