Vuex 反应式 mapGetter 与传递的参数

Posted 2023-02-22

【中文标题】Vuex 反应式 mapGetter 与传递的参数

【英文标题】：Vuex reactive mapGetters with arguments passed through

【发布时间】：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 辅助函数的对象操作）。我在示例中添加了一些内容，表明如果我们不更改函数的参数而是更改状态，反应性就可以正常工作。

【参考方案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' 无效