VueJS:通过 mapGetters 接收参数对状态变化做出反应
VueJS: React to State change through mapGetters receiving arguments
问题
如何将参数传递给 mapGetters
中的 getter
?这是同时对 widgetFetched.posts
和 posts
上的状态变化做出反应的正确方法吗?换句话说,我的 getter
可以对这些变化做出反应吗?
说明
我试图让我的组件通过 getter
对 Vuex Store
中 State
的变化做出反应。为此,我在我的组件中使用 mapGetters
。但是这个 getter
收到一个参数,一个 id
来过滤我的状态(即展平)。
我有两个状态(即字典):widgetsFetched
和 posts
。一个 widgetFetched
有一个名为 posts
的 属性,它是 Post.Id
的数组。状态 posts
是一个字典,其键为 Post.Id
.
所以,我有一个名为 getPostsByWidgetId
的 getter
,它接受一个参数 widgetId
。然后,我的 getter
returns 一个包含由 widgetFetched.posts
的 ids 过滤的帖子的数组。
商店
const store = new Vuex.Store({
state: {
widgetsFetched: {
1: { id: 1, done: true, posts: [1, 2, 3, 4] },
2: { id: 2, done: false, posts: [5, 6] }
},
posts: {
1: { name: '...', id: 1, content: '...' },
2: { name: '...', id: 2, content: '...' },
3: { name: '...', id: 3, content: '...' },
4: { name: '...', id: 4, content: '...' },
5: { name: '...', id: 5, content: '...' },
6: { name: '...', id: 6, content: '...' }
}
},
getters: {
getPostsByWidgetId: (state, getters) => (widgetId) => {
if (widgetId && state.widgetsFetched[widgetId] && state.widgetsFetched[widgetId].posts) {
return state.widgetsFetched[widgetId].posts.map((postId) => {
return state.posts[postId]
})
}
}
}
})
组件
我的组件看起来像:
<template>
<div>
<p v-for="post in posts(this.widget._id)" >{{ post.id }} - {{ post.score }}</p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'reddit',
props: ['widget'],
computed: {
...mapGetters({
posts: 'getPostsByWidgetId'
})
}
}
</script>
<style scoped>
</style>
例子
现在,mapGetters
不支持传递参数。但是你可以用这段代码达到类似的效果:
computed: {
posts() {
return this.$store.getter.getPostsByWidgetId(this.widget._id)
}
}
问题
如何将参数传递给 mapGetters
中的 getter
?这是同时对 widgetFetched.posts
和 posts
上的状态变化做出反应的正确方法吗?换句话说,我的 getter
可以对这些变化做出反应吗?
说明
我试图让我的组件通过 getter
对 Vuex Store
中 State
的变化做出反应。为此,我在我的组件中使用 mapGetters
。但是这个 getter
收到一个参数,一个 id
来过滤我的状态(即展平)。
我有两个状态(即字典):widgetsFetched
和 posts
。一个 widgetFetched
有一个名为 posts
的 属性,它是 Post.Id
的数组。状态 posts
是一个字典,其键为 Post.Id
.
所以,我有一个名为 getPostsByWidgetId
的 getter
,它接受一个参数 widgetId
。然后,我的 getter
returns 一个包含由 widgetFetched.posts
的 ids 过滤的帖子的数组。
商店
const store = new Vuex.Store({
state: {
widgetsFetched: {
1: { id: 1, done: true, posts: [1, 2, 3, 4] },
2: { id: 2, done: false, posts: [5, 6] }
},
posts: {
1: { name: '...', id: 1, content: '...' },
2: { name: '...', id: 2, content: '...' },
3: { name: '...', id: 3, content: '...' },
4: { name: '...', id: 4, content: '...' },
5: { name: '...', id: 5, content: '...' },
6: { name: '...', id: 6, content: '...' }
}
},
getters: {
getPostsByWidgetId: (state, getters) => (widgetId) => {
if (widgetId && state.widgetsFetched[widgetId] && state.widgetsFetched[widgetId].posts) {
return state.widgetsFetched[widgetId].posts.map((postId) => {
return state.posts[postId]
})
}
}
}
})
组件
我的组件看起来像:
<template>
<div>
<p v-for="post in posts(this.widget._id)" >{{ post.id }} - {{ post.score }}</p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'reddit',
props: ['widget'],
computed: {
...mapGetters({
posts: 'getPostsByWidgetId'
})
}
}
</script>
<style scoped>
</style>
例子
现在,mapGetters
不支持传递参数。但是你可以用这段代码达到类似的效果:
computed: {
posts() {
return this.$store.getter.getPostsByWidgetId(this.widget._id)
}
}