vuex多模块
vue组件中分模块引入
方案一
js
// 在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模块中
}
方案二
js
// 在vue组件中分模块引入
import { mapState, mapGetters } from 'vuex'
// 使用
computed: {
...mapState(['runtimeEnv']), // 【根模块中】
// 第一个参数指定模块名称
...mapGetters('user', ['authStatus', 'authStatusDesc']) // user模块中
},
分模块操作dispatch/commit
js
this.$store.dispatch('user/getInfo', {name: '123'}) // dispatch user模块mutations中的 getInfo
this.$store.commit('user/setInfo', {name: '123'}) // commit user模块mutations中的 setInfo