带有参数和计算属性的Vuex getter

Question

我很难理解教程中的代码是如何工作的。

我有EventComponent组件，它显示有关事件的信息。它使用一个访问Vuex存储的计算属性。

<h4>This event is {{ getEvent(1) }}.</h4>

export default  {
computed: {
getEvent() {
return this.$store.getters.getEventById
}
}}

这是我的Vuexindex.js文件：

export default createStore({
state: {
events: [{id: 1, title: "Last day"}]
},
mutations: {},
getters: {
getEventById: state => id => {
return state.events.find(event => event.id === id)
}
},
actions: {},
modules: {}
})

事件信息显示正确。然而，我被弄糊涂了

1. 计算属性如何能够接受参数
2. 当getter没有用该参数显式调用时，如何将该参数传递给存储getter

你能帮我理解吗？

Answer 1

1. 计算属性如何能够接受参数

由于getEvent只返回this.$store.getters.getEventById(它是函数的getter(，getEvent也返回函数，因此可以用完全相同的方式调用。

2. 当getter没有用该参数显式调用时，如何将该参数传递给存储getter

实际上，getter确实是用该参数调用的。如上所述，getEvent实际上是this.$store.getters.getEventById的别名，因此getEvent(1)与this.$store.getters.getEventById(1)相同。

Answer 2

从计算的属性返回一个函数，该属性将id作为参数：

<h4>This event is {{ getEvent(1) }}.</h4>
export default  {
computed: {
getEvent() {
return (id)=>this.$store.getters.getEventById(id)
}
}}