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’]),
},
完成调用

Logo

前往低代码交流专区

更多推荐