如何跨不同的存储重用Vuex状态属性?

Question

我试图跨多个商店重用isLoading状态属性。我希望通过拥有一个包含状态和突变的外部对象来工作，当我将它们导入某个存储库时，该存储库将自动与该对象中包含的状态和突变合并。与生成新存储的模块不同，我希望该对象与导入它的存储合并。

,

// load-mixin.js
export default {
state: {
isLoading: false,
isLoaded: false,
},
mutations: {
setIsLoading(state, isLoading) {
state.isLoading = isLoading
},
setIsLoaded(state, isLoaded) {
state.isLoaded = isLoaded
},
}
}

// store1.js
import loadState from 'load-mixin'
export default {
namespaced: true,
// this should have the states and mutation from `load-mixin`
mixins: [
loadState
],
}

// store2.js
import loadState from 'load-mixin'
export default {
namespaced: true,
// this should have the states and mutation from `load-mixin`
mixins: [
loadState
],
}

但看起来没有混合在Vuex。有什么方法可以做到这一点吗?

Answer 1

考虑到每个存储都需要有自己的isLoading状态属性，这可以通过辅助函数来完成:

const withIsLoading = storeConfig => deepMerge({}, storeConfig, {
state: {
isLoading: false,
isLoaded: false,
},
mutations: {
setIsLoading(state, isLoading) {...},
setIsLoaded(state, isLoaded) {...},
},
});

和

export default withIsLoading({
namespaced: true,
})

其中deepMerge为任意深度合并实现，如Lodashmerge。如果有多个像withIsLoading(withSomethingElse({... }))这样的帮助程序，它们可以与Lodashflow/flowRight或类似的函数组合在一起，以避免嵌套。

注意Vuex存储状态可以定义为工厂函数而不是对象，这通常是一个很好的实践。这需要考虑一个更通用的存储定义，它不局限于指定为state的普通对象。

Vuex插件也可以包含可以在存储之间重用的逻辑。

Answer 2

加载和加载状态将用于副作用。你可以在动作中得到这个。不要直接访问状态，对读值使用getter，对设定值使用突变。

someAction ({ dispatch, commit, getters, rootGetters }) {
getters.someGetter // -> 'foo/someGetter'
rootGetters.someGetter // -> 'someGetter'
rootGetters['bar/someGetter'] // -> 'bar/someGetter'


commit('someMutation') // -> 'foo/someMutation'
commit('someMutation', null, { root: true }) // -> 'someMutation'
},