const moduleA = {
namespaced: true,
state: {
moduleAData: 'a'
},
getters:{
moduleAData: state => state.moduleAData,
},
mutations: {
SET_DATA_A: (state, payload) => {
state.moduleAData = payload
}
},
actions: {
setData({ commit }, payload) {
console.log('a')
commit('SET_DATA_A', payload)
}
}
}
const demoB = {
namespaced: true,
state: {
b: 'b'
},
getters:{
dataB: state => state.b,
},
mutations: {
SET_DATA_B: (state, payload) => {
state.b = payload
}
},
actions: {
setDatab({ commit }, payload) {
console.log('b')
commit('SET_DATA_B', payload)
},
someAction:{
// root:true,
handler({commit},payload){
commit('SET_DATA_B',payload)
}
}
}
}
export default new Vuex.Store({
modules:{
a: moduleA,
b:moduleB
}
})
使用
getter
...mapGetters('a',['moduleAData']),
...mapGetters('b',['moduleBData']),
或者
...mapGetters('a',{ss:'moduleAData'}),
...mapGetters('b',{bdata:'dataB'})
action
...mapActions(['a/setData','namespace/action']),
this['a/setData']('sdsds')
或者
this.$store.dispatch('a/setData','sdsds')
或者
...mapActions('a',{
'aaa':'setData'
}),
this.aaa('新的a数据')
或者
...mapActions('a',['setData']),
...mapActions('b',['setDatab']),
this.setData('新的a数据')
插件 plugins
Vuex 的 store 接受 plugins 选项,这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数,它接收 store 作为唯一参数
在插件中不允许直接修改状态——类似于组件,只能通过提交 mutation 来触发变化。
通过提交 mutation,插件可以用来同步数据源到 store。
使用
const syncStorage = (store) => {
// 当 store 初始化后调用
store.subscribe((mutation, state) => {
// 每次 mutation 之后调用
// mutation 的格式为 { type, payload }
// console.log(mutation, state)
if(mutation.type=='a/SET_DATA_A'){
store.dispatch('b/setDatab','111111')
}
})
}
export default new Vuex.Store({
strict: true,
state,
getters,
mutations,
actions,
plugins: [syncStorage]
})
网友评论