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)
  }
},