由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：
例如：在我的一個項目中，我單獨為導航欄菜單建立了一個模塊,文件名為menu.js，所以我的store結構圖如下

store index.js 中兩步設置
1：導入導航欄子模塊import menus from ‘…/store/modules/menu’
2：在modules中引用menus

import Vue from 'vue' import Vuex from 'vuex' //導入子模塊 import menus from '../store/modules/menu' Vue.use(Vuex)export default new Vuex.Store({state: {token: ''},//異步操作state中的變量mutations: {//將token放入store,并且存儲再localStorageSET_TOKEN: (state,token) => {//mutations中函數會有兩個參數:1:state(固定參數,指state),2:其他參數(可以是傳過來的數據)//這里只能寫state,不能寫this.state,否則會報錯state.token = token;localStorage.setItem("token",token);},//logout清除用戶信息resetState: (state) => {state.token = '';}},actions: {},modules: {//引用導航欄子模塊menus,} })

menu.js
注意：
錯誤寫法：export default new Vuex.Store({})
正確寫法：export default{} ，因為Store只能有一個，并且放在store下的index.js，所以我們menu只是返回一個對象
記得在index.js中引用該模塊

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex) //錯誤寫法export default new Vuex.Store({}) //正確寫法export default{} ，因為Store只能有一個，并且放在store下的index.js //記得在index.js中引用該模塊 export default {state: {menuList: [],permList: [],//權限列表},//異步操作state中的變量mutations: {setMenuList(state,menuList){state.menuList = menuList;},setPermList(state,permList){state.permList = permList;}},actions: {}, }

引用子模塊變量
以menu.js中menuList變量為例

///導入store import store from '../store' //引用menuList store.state.menus.menuList

總結

以上是生活随笔為你收集整理的Router Modules模块化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。