javascript - 在 Vuex getter 中使用组件道具的正确方法是什么？

Question

假设您有一个简单的应用程序组件，其中包含一个按钮，可以使用 vuex 商店从计数器组件中添加多个计数器。

这是关于 webpackbin 的全部内容。

有点像vuex git repo中的基本反例。但是您想使用带有通过组件上的属性传递的 ID 的 vuex getter，您会怎么做？

getter 必须是纯函数，因此您不能使用this.counterId. 官方文档说您必须使用计算属性，但这似乎也不起作用。此代码为 getter 返回 undefined：

import * as actions from './actions'

export default {
    props: ['counterId'],
    vuex: {
        getters: {
            count: state => state.counters[getId]
        },
        actions: actions
    },
    computed: {
        getId() { return this.counterId }
    },
}

Answer 1

getter 应该是纯函数，不依赖于组件状态。

你仍然可以从 getter 中创建一个计算的 prop，或者直接使用 store：

//option A
export default {
    props: ['counterId'],
    vuex: {
        getters: {
            counters: state => state.counters
        },
        actions: actions
    },
    computed: {
        currentCounter() { return this.counters[this.counterId] }
    },
}

//option B (better suited for this simple scenario)
import store from '../store'
computed: {
  currentCounter() {  
    return store.state.counters[this.counterId] 
  }
}