Vuex的模块化对于state的引用以及action方法的调用

vuex.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import helpCenter from './modules/helpCenter'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        
    },
    mutations: {
        
    },
    actions: {
        
    },
    modules:{
        helpCenter
    },
    getters
})
export default store

使用 import helpCenter from ‘./modules/helpCenter’ 引入模块
使用 import getters from ‘./getters’ 引入getters

helpCenter模块代码（记得使用namespace命名空间，当你没有定义变量名的时候一定要开始，方便后续的使用）

const helpCenter={
  namespaced: true,
  state:{
    isView:false,
    isViewId:1,
    tabToobar:''
  },
  mutations:{
    SET_ISVIEW: (state, isView) => {
      state.isView = isView
  },
    SET_ISVIEWID:(state,isViewId)=>{
      state.isViewId=isViewId
    },
    SET_TABTOOBAR:(state,tabToobar)=>{
      state.tabToobar=tabToobar
    }
  },
  actions:{
    SET_ISVIEW: ({ commit }, isView) => {
      commit('SET_ISVIEW', isView)
  },
    SET_ISVIEWID:({ commit },isViewId)=>{
      commit('SET_ISVIEWID',isViewId)
    },
    SET_TABTOOBAR:({ commit },tabToobar)=>{
      commit('SET_TABTOOBAR',tabToobar)
    }
  },

  }
  export default helpCenter

getters代码

const getters={
  isView:state=>state.helpCenter.isView,
  isViewId:state=>state.helpCenter.isViewId,
  tabToobar:state=>state.helpCenter.tabToobar
}
export default getters

重点
如何调用模块内的action（state可以都放在getters里面，这里就不讲调用mutation、state了，一般都使用action去调用mutation里面的方法（个人意见））

    this.$store.dispatch('helpCenter/SET_ISVIEW', true)
    this.$store.dispatch('helpCenter/SET_ISVIEWID', id)

一定要在模块里面开启namespace名称空间，不然无法调用，调用写法
引用的模块名称+action方法名称


重点又来了（如何调用getters）
记得仔细看getters.js文件

state.引入模块的名字.引入模块内的state属性名称

在想获取某个模块内的属性的组件中引入 mapGetters

import { mapGetters, mapState } from 'vuex'

在compute中映射mapGetters
computed: {
…mapGetters([‘isView’, ‘isViewId’, ‘tabToobar’]),
},
完成调用