VueJS: Reagieren durch mapGetters zu Zustandswechsel Argumente

Question

Frage

Empfang Wie kann ich Argumente an eine getter innerhalb mapGetters passieren? Ist dies der richtige Weg, um gleichzeitig auf widgetFetched.posts und posts eine Zustandsänderung zu reagieren? Mit anderen Worten, kann meine getter auf diese Änderungen reagieren?

---

Erklärung

Ich versuche, meine Komponente zu machen reagieren in State in meinem Vuex Store durch eine getter zu einer Änderung. Um dies zu erreichen, verwende ich mapGetters in meiner Komponente. Aber dieses erhält ein Argument, ein id, um meinen Zustand zu filtern (das ist abgeflacht).

Ich habe zwei Staaten (das sind Wörterbücher): widgetsFetched und posts. Eine widgetFetched hat eine Eigenschaft namens posts, die ein Array von Post.Id ist. Und der Staat posts ist ein Wörterbuch, dessen Schlüssel Post.Id sind.

So habe ich eine namens getPostsByWidgetId, die ein Argument widgetId dauert. Dann gibt mein getter ein Array zurück, das Beiträge enthält, die durch widgetFetched.posts IDs gefiltert werden.

---

Shop

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

---

Komponente

Meine Komponenten wie folgt aussieht:

<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> 

---

Beispiele

---

Answer 1

Gerade jetzt, hat mapGetters nicht Geben von Argumenten unterstützen. Aber Sie können einen ähnlichen Effekt mit diesem Code erzielen:

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