Vuex mapState、mapMutations映射使用总结

1. 基本框架

参考：https://blog.csdn.net/weixin_35773751/article/details/121368249

2. 不同的映射方法

state映射

...mapState({
  'name':state=>state.user.username
})

// 普通映射
...mapState(['leftFocus', 'hasBg'])

// 模块映射
...mapState(modelName, ['leftFocus', 'hasBg'])

// 多个模块映射
...mapState(modelName1, ['leftFocus1', 'hasBg1'])
...mapState(modelName2, ['leftFocus2', 'hasBg2'])

mutations映射

...mapMutations(['updateBg'])
...mapMutations(modelName, ['updateBg'])

3.框架级写法

src/store/index.js

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

Vue.use(Vuex)
const store = new Vuex.Store({
    modules: {
        user,
        common
    },
    getters,
})

src/store/getters.js

const getters = {
  tag: state => state.user.tag,
  language: state => state.common.language
}
export default getters

组件中使用

computed: {
  ...mapGetters(["userInfo"]),
},

基本大概现在就是这些吧。