vuex多模块

vue组件中分模块引入

方案一

// 在vue组件中分模块引入
import {  mapState, createNamespacedHelpers } from 'vuex'
const { mapState: mapStateUser, mapGetters: mapGettersUser, mapMutations: mapMutationsUser } = createNamespacedHelpers('user')
// 使用
computed: {
  ...mapState(['runtimeEnv']), // 【根模块中】
  ...mapStateUser(['userInfo']), // user模块中
  ...mapGettersUser(['isLogin', 'userName']) // user模块中
},
methods: {
  ...mapMutationsUser(['clearStatus']), // user模块中
}

方案二

// 在vue组件中分模块引入
import {  mapState, mapGetters } from 'vuex'
// 使用
computed: {
  ...mapState(['runtimeEnv']), // 【根模块中】
  // 第一个参数指定模块名称
  ...mapGetters('user', ['authStatus', 'authStatusDesc']) // user模块中
},

分模块操作dispatch/commit

this.$store.dispatch('user/getInfo', {name: '123'}) // dispatch user模块mutations中的 getInfo
this.$store.commit('user/setInfo', {name: '123'}) // commit user模块mutations中的 setInfo