如何重用不同商店的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是任何深层合并实现，例如lodash 。如果有多个帮助者，例如withisloading（withsomethingelse（{...}}）），它们可以与lodash flow/code>/flow> flow或类似的功能，以避免嵌套。

请注意，Vuex Store状态可以定义为工厂功能，而不是对象，这通常是一个好习惯。对于更通用的商店定义，需要考虑这一点，该定义不限于指定为state的普通对象。

Vuex插件也可以包含可以在商店之间重复使用的逻辑。

Answer 2

加载和加载状态您将用于副作用。因此，您可以采取行动。并且不要访问状态直接使读取值读取值和突变以设置值。
你会在下面做

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'
          },