【问题标题】:Vuex reactive mapGetters with arguments passed throughVuex 反应式 mapGetter 与传递的参数
【发布时间】:2019-06-04 14:21:39
【问题描述】:

我有很多将参数传递给商店的 getter,例如:

this.$store.getters['getSomeThing'](this.id)

而且我没有找到关于如何以最佳方式使用 mapGetters 来保持反应性,同时传递参数的建议。我发现的一个建议是映射 getter,然后在mounted 中传递参数:

computed: {  
  ...mapGetters([
    'getSomeThing'
  ])
},
mounted () {
  this.getSomeThing(this.id)
}

这似乎真的不是最理想的,因为它只会检查挂载状态的变化。关于如何在将参数传递给 getter 时最好地保持反应性的任何建议?下面是一个匹配上述代码的 getter 示例:

getSomeThing: (state) => (id) => {
  return state.things.find(t => { return t.id === id })
}

【问题讨论】:

  • 如果从getSomeThing返回的数据没有改变,我最好的猜测是你没有在你的data函数中设置this.id,导致它没有反应。映射器将返回 getSomeThing 版本,它是静态的。您不想/必须以某种方式返回不同的功能。您希望在更改 this.id 时再次调用该函数,这显然不会发生。
  • 一个沙盒展示了:codesandbox.io/s/kxz40j7z53
  • 你有代码示例吗?你的意思是如果this.id 附加的对象发生了变化?在本例中,this.id 永远不会改变,但对象的其余部分会。
  • 显示使用从这个getter返回的数据的代码。
  • 或者,如果您不更改 this.id,而是更改状态,则您可能正在执行无法正确更新状态的操作(例如,没有 vue 辅助函数的对象操作)。我在示例中添加了一些内容,表明如果我们不更改函数的参数而是更改状态,反应性就可以正常工作。

标签: vue.js vuejs2 state vuex flux


【解决方案1】:

这是我的一个项目中的一个 sn-p:

    computed: {
        ...mapGetters('crm', ['accountWithId']),
        account() {
            return this.accountWithId(this.$route.params.id)
        }
    },

这使得this.account 反应并依赖于参数。

所以...

computed: {  
  ...mapGetters([
    'getSomeThing'
  ]),
  thing() {
    return this.getSomeThing(this.id)
  }
},

【讨论】:

  • 这就是我想要的!谢谢!
  • 惊人的解决方案,非常感谢!节省大量代码?
  • 谢谢,找了好久!!这应该在 Vuex 官方文档中。
  • 对于任何寻找这就是解决方案的人。我不知道为什么,但出于某种原因:'crm', ['accountWithId'] 有效,而 'crm/accountWithId' 无效
猜你喜欢
  • 2022-01-17
  • 2020-05-25
  • 2019-06-11
  • 1970-01-01
  • 1970-01-01
  • 2018-01-08
  • 1970-01-01
  • 1970-01-01
  • 2020-09-28
相关资源
最近更新 更多