Vuex modules模式下mapState/mapMutations/mapActions的操作

 當我們用vuex進行數據維護時，會衍生出多個模塊進行存儲狀態 。

下面簡單記錄一下使用vuex modules 的模塊的命名空間 以及輔助函數 類似語法糖

 1.store結構

 

 

 

   2.index.js

import Vue from 'vue'
import Vuex from 'vuex'
import common from './modules/common'

Vue.use(Vuex)

const  store=new Vuex.Store({
  modules:{
    common
  }

})
export default store

3.common.js

const common={
  namespace:true,
  state:{
    user:'',
    msg:''
  },
  mutations:{
    upUser(state,data){
      state.user=data
    },
  },
  actions:{
    // 登錄
    Login({ commit }, userInfo) {
      console.log(userInfo)
    }
  }

}
export default common

4.組件使用

import { mapState ,mapMutations,mapActions} from 'vuex'

computed: mapState({
  user: (state) => state.common.user,
  msg:(state)=>state.common.msg

}),
methods:{
  ...mapMutations({
    upUser(commit, userName) {
      commit("upUser", userName)
    },
  }),
  ...mapActions(['Login']),
  setLogin(data){
    this.Login(data)
  }
},