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: {},acti
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’]),
},
完成调用
更多推荐
所有评论(0)