vue.js - Vuex 在异步操作完成之前访问状态

Question

我遇到了一个问题，计算的 getter 在更新之前访问状态，从而呈现旧状态。我已经尝试了一些事情，例如将突变与操作合并并将状态更改为许多不同的值，但是在分派(dispatch)完成之前仍然调用 getter。

问题

在异步操作(api 调用)完成之前访问状态。

代码结构

1. 组件 A 加载 API 数据。
2. 用户点击了 1 个数据。
3. 组件 A 将点击数据(对象)分派(dispatch)给组件 B。
4. 组件 B 加载接收到的对象。

注意

DOM 渲染良好。这是一个控制台错误。 Vue 一直在观察 DOM 的变化并立即重新渲染。然而，控制台会拾取所有内容。

目标

阻止组件 B(仅在组件之后调用)在组件 A 的分派(dispatch)完成之前运行其计算的 getter 方法。

Store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios';

Vue.use(Vuex);

export const store = new Vuex.Store({

  state: {
    searchResult: {},
    selected: null,
  },

  getters: {
    searchResult: state => {
      return state.searchResult;
    },
    selected: state => {
      return state.selected;
    },
  },

  mutations:{
    search: (state, payload) => {
      state.searchResult = payload;
    },
    selected: (state, payload) => {
      state.selected = payload;
    },
  },

  actions: {
    search: ({commit}) => {
      axios.get('http://api.tvmaze.com/search/shows?q=batman')
        .then(response => {
          commit('search', response.data);
        }, error => {
          console.log(error);
        });
    },

    selected: ({commit}, payload) => {
      commit('selected', payload);
    },
  },

});

SearchResult.vue

<template>
<div>
  //looped
  <router-link to="ShowDetails" @click.native="selected(Object)"> 
      <p>{{Object}}</p>
  </router-link>
</div>
</template>

<script>
export default {
  methods: {
    selected(show){
      this.$store.dispatch('selected', show);
    },
  },
}
</script>

ShowDetails.vue

<template>
<div>
  <p>{{Object.name}}</p>
  <p>{{Object.genres}}</p>
</div>
</template>

<script>
export default {
  computed:{
    show(){
      return this.$store.getters.selected;
    },
  },
}
</script>

This image shows that the computed method "show" in file 'ShowDetails' runs before the state is updated (which happens BEFORE the "show" computed method. Then, once it is updated, you can see the 2nd console "TEST" which is now actually populated with an object, a few ms after the first console "TEST".

问题

Vuex 完全是关于状态监视和管理的，所以我怎样才能防止这个控制台错误？

提前致谢。

Answer 1

store.dispatch 可以处理触发操作处理程序返回的 Promise，它也返回 Promise。参见 Composing Actions .

你可以设置你的selected action来返回这样的 promise :

selected: ({commit}, payload) => {
    return new Promise((resolve, reject) => {
        commit('selected', payload);
    });
} 

然后在您的 SearchResults.vue 中使用按钮而不是使用 router-link 并执行 programmatic navigation在您的selected 操作的成功回调中，如下所示:

<template>
<div>
  //looped
  <button @click.native="selected(Object)"> 
      <p>{{Object}}</p>
  </button>
</div>
</template>

<script>
export default {
  methods: {
    selected(show){
      this.$store.dispatch('selected', show)
          .then(() => {
            this.$router.push('ShowDetails');
        });
    },
  },
}
</script>