Vuex模塊化

上圖是vuex的結構圖vuex即 store, 包含State,Action,Mutations, 每一個vue項目都需要使用vuex做組件之間的數據共享

使用場景:

數據最終存放在store的State中, 但是也會面臨問題, 比如,login.vue和dept.vue這倆組件都需要使用store在不同的組件之間進行數據的共享, 很明顯,將login.vue中得到的用戶信息和后續得到的dept信息都放在一個Store.State中時,就會顯得很臃腫,這時可以考慮將store模塊化了

模塊化后的 store 大概長這樣,如果畫的不對,歡迎留言

這樣經過模塊化的vuex,每個模塊維護着不同組件的數據,清晰直觀

編碼實現

創建store文件夾, 創建index.js 作為vuex的入口js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import getters from './getters'
import dept from "./modules/dept";

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    user,
    dept
  },
  getters
})

export default store

如上圖中,將vuex划分成三個模塊,每一個模塊都擁有自己的action, mutation, state組件

創建vuex的子模塊, user.js , 編碼如下: 注意點就是要開啟命令空間模式, namespaced=true , 因為現在的store被划分成了多模塊,每一個模塊都有自己的state,所有在mapXXX使用時,需要指定使用的是哪個模塊下的state

const user = {
  namespaced: true,
  state: {
    // 用戶的屬性
  },

  mutations: {
   // todo
   AddInfo(state,data){
       // todo with state
   }
  },
  actions: {
     addInfo({commit},data){
         commit('AddInfo',data)
     }
   // todo
  }
}
export default user

多模塊vuex的使用:

如圖,如果不划分模塊,我們有兩種方法,可以這樣,$store.state.屬性 或者 $store.getters取出state中的值使用,划分模塊后,推薦使用通過名稱空間映射的方式映射出不同模塊的State再使用

所以需要再創建getters.js

const getters = {
  userId: state => state.user.userId
}
export default getters

• 取值

import store from './store'

let userId = store.getters.userId

• 映射action
  指定 模塊,映射出方法

 import {mapActions} from "vuex";
   ...mapActions('user', [
        'addInfo',
 ]),