VueJS:通过mapGetters接收参数来对状态变化做出反应

时间:2017-09-29 08:03:26

标签: javascript vue.js vuejs2 vuex

问题

如何将参数传递给getter内的mapGetters?这是否能够同时对widgetFetched.postsposts的状态更改做出正确的反应?换句话说,我的getter可以对这些变化作出反应吗?

解释

我尝试通过State让我的组件对Vuex Store getter中的更改做出反应。为此,我在我的Component中使用mapGetters。但是这个getter收到一个参数,id来过滤我的状态(这是扁平的)。

我有两个州(即字典):widgetsFetchedposts。一个widgetFetched有一个名为posts的属性,它是Post.Id的数组。状态posts是一个字典,其键为Post.Id

所以,我有一个名为getter的{​​{1}},它接受​​一个参数getPostsByWidgetId。然后,我的widgetId会返回一个数组,其中包含按getter ids过滤的帖子。

存储

widgetFetched.posts

组件

我的组件如下:

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]
        })
      }
    }
  }
})

实施例

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:2)

目前,mapGetters不支持传递参数。但是你可以用这段代码实现类似的效果:

computed: {
  posts() {
    return this.$store.getter.getPostsByWidgetId(this.widget._id)
  }
}