动态注册的vuex模块的rootState不响应

时间:2019-02-19
本文章向大家介绍动态注册的vuex模块的rootState不响应,主要包括动态注册的vuex模块的rootState不响应使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

我需要为从服务器检索的每个项目保留一些缓存的getter。
我为每个项目动态注册一个vuex模块,如下所示:

store.registerModule(['itemGet', id], {
  namespaced: true,
  state () { return {id} },
  getters: {
    exampleGetter (state, getters, rootState) {
      if (rootState.oldModule.prop === 1) return state.id
      return false
    }
  }
})

该模块已正确注册。
但是,每当我的这个动态模块的getter使用rootState并查看在商店实例化中注册的其他模块时,它都不rootState是被动的。

即使我做了一些突变的rootState(到另一个模块),在我的动态注册的模块干将使用rootState将始终保持rootState 只是在动态注册模块的时间 ...

在上面的例子中:

如果我store.state.oldModule.prop通过突变进行变异,exampleGetter则不会被动,只会rootState.oldModule.prop在动态模块注册时知道

问题解决方案:

问题不在于getter本身,而是创建了对getter的引用,但在模块注册期间意外地硬编码了结果:

我做了什么:

store.$itemGetters[id] = Object.keys(getters) // my getter functions
  .reduce((carry, key) => {
    carry[key] = store.getters[`itemGet/${id}/${key}`]
    return carry
  }, {})

我改变了什么来解决它:

store.$itemGetters[id] = Object.keys(getters)
  .reduce((carry, key) => {
    carry[key] = _ => { return store.getters[`itemGet/${id}/${key}`] }
    return carry
  }, {})

因此,不要使用以下内容调用特定项ID的getter:

  • store.$itemGetters[id].exampleGetter

我现在必须这样做:

  • store.$itemGetters[id].exampleGetter()