vueX 的五大核心模块

## Vuex
1 概念与理解 
2 五大核心模块
  new  Vuex.Store({
    state: {

    },
    mutations: {
      changeName(state, paylaod) {
        ...
      }
    },
    actions: {
      getUsername(context,payload) {

      }
    },
    getters: {
       ***(state, getters) {

       }
    },
    modules: {}
  })

  state-提供状态的地方
  mutations-唯一修改状态的地方(方便状态被调试工具追踪)
  actions-放异步请求
  getters-计算属性
  modules-定义子模块
3 如何操作这些核心模块


根级别state
  $store.state.msg
  ...mapState(['msg']) 
子模块级别state  
  $store.state.子模块名.msg
  ...mapState('模块名',['msg']) 


根级别mutations
  $store.commit('mutationName')  
  ...mapMutations(['mutationName'])
子模块级别mutations
  $store.commit('模块名/mutationName')  
  ...mapMutations('模块名',['mutationName'])


根级别actions  
  $store.dispatch('actionName')  
  ...mapActions(['actionName'])
子模块级别actions  
  $store.dispatch('模块名/ActionName')  
  ...mapActions('模块名',['actionName'])  


根级别getters 
   $store.getters.计算属性名
   ...mapGetters(['计算属性名'])
子模块级别getters 
   $store.getters['模块名/计算属性名']
   ...mapGetters('模块名',['计算属性名'])   

总结 
1 用辅助函数 ...mapXXX('模块名',['xxxx'])  
2 尝试打印 $store.state $store.getters


Vue2项目 Vue3