由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割：

const moduleA = {
 state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
}
 
const moduleB = {
 state: () => ({ ... }),actions: { ... }
}
 
const store = new Vuex.Store({
 modules: {
 a: moduleA,b: moduleB
 }
})
 
store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

補充知識：vuex實現模組化分割，在不同類別的檔案中放置對應的資料及操作

目錄結構為

store資料夾下有index.js 、modules資料夾，在modules資料夾下是你的模組，最好通過功能命名

一級目錄：store

一級目錄下檔案：index.js

二級目錄：modules

三級目錄demo

三級目錄下檔案demo.js

三級目錄下檔案getter.js

三級目錄下檔案mutations.js

三級目錄下檔案 state,js

各檔案的內容為

一級目錄下index.js

import Vue from 'vue'
import Vuex from 'vuex'
import demo from './modules/demo/demo.js';
Vue.use(Vuex);
const $store = new Vuex.Store({
　　modules: {
　　　　demo
　　}
});
export default $store;

三級目錄下demo.js

import state from './state.js';
import mutations from './mutations.js';
// 按需要匯入
// import getters from './getters.js';
// import actions from './actions.js';

export default{
// 將匯入的檔案暴露出去
 state,mutations
}

三級目錄其他檔案

export default{}

最後在main.js中掛載

import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'
//引入vuex
import store from './store'
//把vuex定義成全域性元件
Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
 store,...App
})
app.$mount();

以上這篇vuex Module將 store 分割成模組就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。