當應用非常復雜的時候，store對象就會變得非常臃腫。
為了解決上面的問題，我們將store分成模塊
文件目錄如下
方案一：

方案二：

狀態管理中 state 就相當于 vue中 data屬性， getters就相當于vue中的computed屬性， mutations,
actions就相當于vue中的方法

getter

gettetr被認為 是計算屬性 返回值會作為依賴緩存起來 只有當依賴發生變化時才會重新計算

mutation

action

模塊化

import Vue from "vue" import Vuex from "vuex" import footerStatus from './modules/footerStatus' import collection from './modules/collection'Vue.use(Vuex)export default new Vuex.Store({modules: { // 這里聲明兩個模塊，后面使用就知道為啥要這樣搞了collection,footerStatus} })

1.模塊化以后，state的獲取務必要加上一個模塊名，才能獲取到模塊里面的對象

eg: this.$store.state.moduleA.name

2.在輔助函數中我們同樣需要這樣做

...mapState({name:state => state.moduleA.name })

3.命名空間
一旦去做了模塊化處理，這樣一定會產生命名沖突。
所以我們利用了namespace:true來避免命名沖突
當模塊被注冊之后
模塊里面的state action mutation會自動根據 模塊名自動調整命名

export default moduleA {namespace:true,state,action,mutation}

同樣vuex的開發者考慮到，我們每次都要寫模塊名很麻煩，所以在輔助函數中給我們提供了一個參數位置來綁定命名空間

...mapstate('moduleA',{name：state=>state.name })

const board = {//數據當前的狀態state:{boardDataset:[]}, //get獲取狀態 類似于computedgetters:{getBoardDataset(state){return state.boardDataset}}, //同步更新狀態actions:{changeBoardDataset(state , item){state.boardDataset.push(item)}}, //異步更新狀態mutations:{asynChangeBoardDataset(context,item){context.commit('changeBoardDataset',item)}} }//導出模塊 export default board;

在需要的組件中我們通過輔助函數進行引用：

...mapState({boardDatasets:state=>state.board.boardDataset})

總結

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

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