Vuex에서 매개 변수화된 getter - 트리거 udpate

Vuex에서 매개 변수화된 getter - 트리거 udpate

제 Vuex 스토어에는 1,000개의 레코드가 있습니다.파라미터 getItem을 사용하여 ID를 취득하여 올바른 레코드를 반환하는 getter가 있습니다.

데이터가 언제 준비되었는지(모든 레코드의 비동기 페치가 언제 완료되었는지) 알 수 있도록 해당 게터에 액세스하는 구성 요소가 필요합니다.

다만, 파라메타화된 getter이기 때문에, Vue는 갱신 타이밍을 알기 위한 상태를 감시하고 있지 않습니다.어떻게 해야 하나?

Angular에서 많이 사용하던 Behavior Subject 패턴으로 되돌리고 싶은데 Vuex + rxJs가 무거워 보이죠?

어떻게든 다시 계산하기 위해 방아쇠를 당겨야 할 것 같아.

store.displaces를 설정합니다.

import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'

Vue.use(VueResource);

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    numberOfPosts : -1,
    posts : {}, //dictionary keyed on slug
    postsLoaded : false,
  },
  getters : {
    postsLoaded : function(state){
      return state.postsLoaded;
    },
    totalPosts : function(state){
      return state.numberOfPosts;
    },
    post: function( state ){
      return function(slug){
        if( state.posts.hasOwnProperty( slug ) ){
          return state.posts.slug;
        }else{
          return null;
        }
      }
    }
  },
  mutations: {
    storePosts : function(state, payload){
      state.numberOfPosts = payload.length;
      for( var post of payload ){
        state.posts[ post.slug ] = post;
      }
      state.postsLoaded = true;
    }
  },
  actions: {
    fetchPosts(context) {
      return new Promise((resolve) => {
        Vue.http.get(' {url redacted} ').then((response) => {
          context.commit('storePosts', response.body);
          resolve();
        });
      });
    }
  }
})

Post.vue

 <template>
      <div class="post">
        <h1>This is a post page for {{ $route.params.slug }}</h1>
        <div v-if="!postsLoaded">LOADING</div>
        <div v-if="postNotFound">No matching post was found.</div>
        <div v-if="postsLoaded && !postNotFound" class="post-area">
          {{ this.postData.title.rendered }}
        </div>
      </div>
    </template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'post',
  data : function(){
    return {
      loading : true,
      postNotFound : false,
      postData : null
    }
  },
  mounted : function(){
    this.postData = this.post( this.$route.params.slug );
    if ( this.postData == null ){
      this.postNotFound = true;
    }
  },
  computed : mapGetters([
    'postsLoaded',
    'post'
  ])
}
</script>

현재 상태에서는 게터에 액세스할 때 데이터가 아직 준비되지 않았기 때문에 "post not found" 메시지가 표시됩니다.투고를 찾을 수 없는 경우, (a) 데이터가 로드되어 있고 일치하는 투고가 없는 경우, (b) 데이터가 로드되어 있지 않으므로 기다려 주십시오.

이 문제는 storePosts 변환에서 posts 어레이를 설정하는 방법에 있다고 생각합니다.구체적으로는 다음 행입니다.

state.posts[ post.slug ] = post

VueJs는 해당 작업을 추적할 수 없으므로 어레이가 업데이트되었음을 알 수 없으므로 getter가 업데이트되지 않습니다.

대신 다음과 같은 Vue 세트를 사용해야 합니다.

Vue.set(state.posts, post.slug, post)

자세한 내용은 Change Detection 경고 문서를 참조하십시오.

현재 실행 중인 코드 스니펫이 없기 때문에 제 아이디어를 설명하는데 코드를 사용할 수 없습니다.당신이 해야 할 일은 다음과 같습니다.

1. 다음을 사용하여 vuex 저장소에 액세스mapGetters계산 속성에서 이미 실행한편, 이미 수행했습니다.Post.vue.
2. 컴포넌트 내에서 매핑된 getters 속성을 확인합니다.이 경우 다음 정보를 감시하는 기능이 있습니다.postsLanded아니면post그 가치가 변화하고 있는 것은,필요할 수 있습니다.deep아니면immediate속성도 API를 확인하십시오.
3. 액션을 통해 vuex 저장소에 돌연변이를 트리거하면 getter가 얻을 스토어 값이 변경됩니다.
4. 감시된 속성 값이 변경된 후 대응하는 감시 함수가 오래된 값과 새로운 값으로 기동되어 로직을 완료할 수 있습니다.

마크 응답 코드 샘플

computed: {
        ...mapGetters([
            'customerData',
        ])
},
methods: {
    ...mapActions(['customerGetRecords']),
},
created() {
    this.customerGetRecords({
        url: this.currentData
    });

언급URL : https://stackoverflow.com/questions/52148561/parametized-getter-in-vuex-trigger-udpate