VueJ: mapGetters 수신 인수를 통해 상태 변경에 대응

VueJ: mapGetters 수신 인수를 통해 상태 변경에 대응

질문.

어떻게 하면 인수를getter안에서.mapGetters이 방법이 상태 변화에 대한 올바른 대응 방법입니까?widgetFetched.posts그리고.posts동시에?다시 말해, 내 말은getter어떻게 대처해야 할까요?

---

설명.

컴포넌트가 다음 변경에 대응하도록 하려고 합니다.State내 안에서Vuex Store을 통해getter이를 위해 저는mapGetters내 컴포넌트 안에 있습니다.근데 이거getter인수가 수신됩니다.id(평탄한) 상태를 필터링합니다.

두 가지 상태(사전)가 있습니다. widgetsFetched그리고.posts.하나.widgetFetched라고 하는 속성을 가지고 있다.posts그것은 의 배열이다.Post.Id그리고 주정부도posts사전의 키는 다음과 같습니다.Post.Id.

그래서 저는...getter불렀다getPostsByWidgetId그것은 하나의 논거를 필요로 한다.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>

---

예

---

지금 당장.mapGetters는 인수 전달을 지원하지 않습니다.다만, 이 코드에서도 같은 효과를 얻을 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/46484382/vuejs-react-to-state-change-through-mapgetters-receiving-arguments