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

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

import Vue from 'vue' import Vuex from 'vuex' //導(dǎo)入子模塊 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中函數(shù)會有兩個參數(shù):1:state(固定參數(shù),指state),2:其他參數(shù)(可以是傳過來的數(shù)據(jù))//這里只能寫state,不能寫this.state,否則會報錯state.token = token;localStorage.setItem("token",token);},//logout清除用戶信息resetState: (state) => {state.token = '';}},actions: {},modules: {//引用導(dǎo)航欄子模塊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: [],//權(quán)限列表},//異步操作state中的變量mutations: {setMenuList(state,menuList){state.menuList = menuList;},setPermList(state,permList){state.permList = permList;}},actions: {}, }

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

///導(dǎo)入store import store from '../store' //引用menuList store.state.menus.menuList

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。