VueJS：

Question

質問

がどのように私はmapGetters内部getterに引数を渡すことができる引数を受け取るmapGettersスルー状態の変更に反応しますか？ widgetFetched.postsとpostsの状態変化に同時に反応するのは正しいですか？言い換えれば、私のgetterはこれらの変更に反応できますか？私は私のコンポーネントを作成しようとしている

---

説明getterを通して私のVuex StoreでStateの変化に反応します。これを実現するには、私のコンポーネントの内部にmapGettersを使用しています。しかし、このgetterは、私の状態をフィルタリングする引数（id）を受け取ります（これは平坦化されています）。

私は2つの状態（辞書である）：widgetsFetchedとpostsを持っています。 1つのwidgetFetchedにはpostsという名前のプロパティがあり、その配列はPost.Idです。状態postsは、キーがPost.Idの辞書です。

したがって、私はgettergetPostsByWidgetIdと呼ばれ、1つの引数widgetIdが必要です。次に、getterはwidgetFetched.postsのIDでフィルタリングされた投稿を含む配列を返します。

---

ストア

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> 

---

例

---

Answer 1

今、mapGettersは通過引数をサポートしていません。しかし、このコードでも同様の効果を得ることができます：

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