Vuex中的参数化getter - 触发更新

Question

我的Vuex商店有一组数据，比如1000条记录。有一个带参数getter的getter，获取一个ID并返回正确的记录。

我需要访问该getter的组件知道数据何时就绪（当完成所有记录的异步提取时）。

然而，由于它是一个参数化的getter，Vue并没有观察它所依赖的状态，知道何时更新它。我该怎么办？

我一直想恢复到我在Angular中使用的BehaviorSubject模式，但是Vuex + rxJS看起来很重，对吧？

我觉得我需要以某种方式为getter重新计算一个触发器。

store.js

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”消息，因为当它访问getter时，数据还没有准备好。如果找不到帖子，我需要区分（a）数据已加载且没有匹配的帖子，以及（b）数据未加载等等

Answer 1

抱歉，我无法使用代码来说明我的想法，因为目前还没有正在运行的代码段。我想你需要做的是：

1. 使用计算属性中的mapGetters访问vuex存储，您已在Post.vue中执行过该操作。
2. Watch组件内部的映射getters属性，在你的情况下会有一个关于postsLanded或post的观察器函数，无论你关心它的值变化。您可能还需要deep或immediate属性，请查看API。
3. 通过操作触发vuex商店的突变，从而改变商家获得的商店价值。
4. 监视属性值更改后，将使用旧值和新值触发相应的监视功能，您可以在那里完成逻辑。