Vuex 中的参数化 getter - 触发 udpate

Question

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

我需要访问该 getter 的组件以了解数据何时准备就绪（当所有记录的异步获取完成时）。

然而，由于它是一个参数化的 getter，Vue 不会监视它所依赖的状态来知道何时更新它。我该怎么办？

我一直想恢复到我在 Angular 中经常使用的 BehaviorSubject 模式，但是 Vuex + rxJS 对此似乎很重，对吧？

我觉得我需要以某种方式发出一个触发器让吸气剂重新计算。

商店.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();
        });
      });
    }
  }
})

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

就目前而言，它显示“未找到帖子”消息，因为当它访问 getter 时，数据还没有准备好。如果未找到帖子，我需要区分 (a) 数据已加载且没有匹配的帖子，以及 (b) 数据未加载，因此请稍候

Answer 1

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

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