javascript - Vuex计算属性仅在更改路由然后又更改回时更新

在我的应用程序的main.js中，我调度了一个操作，该操作从我的API获取公司并选择第一个。该动作每次都调度，似乎在这里不会失败。

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App),
  created: function () {
    this.$store.dispatch('getCompaniesAndSelectFirst');
  }
})

在另一个视图中，我需要检索属于所选公司的活动，因此我可以通过vue-resource进行装载。

mounted: function () {
  if (this.selectedCompanyId) {
    this.$http.get('Campaigns', {params: {companyId: this.selectedCompanyId}}).then(response => {
      // success callback
      this.numbersTableData = response.body;
    }, response => {
      // error callback
    });
  }
}

selectedCompanyId是我的计算属性，它返回Vuex中所选公司的ID。

selectedCompanyId: function () {
  return this.$store.getters.selectedCompanyId;
}

问题是，如果这是第一个加载的视图，则此时未定义selectedCompanyId。

如果刷新页面selectedCompanyId仍未定义，并且get请求失败。

如果在此视图上打开应用程序，则selectedCompanyId是未定义的，并且get请求失败，但是如果我路由到另一个视图，然后又路由回selectedCompanyId已加载，则请求成功。

如果我在另一个视图上打开该应用程序，然后定义了到视图selectedCompanyId的路由，则get请求成功。

据我了解，这是因为我得到公司并选择第一个公司的获取请求需要时间才能完成。

我该如何解决？有没有更好的方法来做我想做的事情？

最佳答案

我停止在Vue实例的getCompaniesAndSelectFirst函数中调度created操作。

我修改了getCompaniesAndSelectFirst操作以返回承诺：

export const getCompaniesAndSelectFirst = ({ commit, state }) => {
  return Vue.http.get('Companies').then(response => {
    // get body data
    var companies = response.body;

    commit('getCompanies', companies);
    commit('selectCompany', companies[0].Id);
  }, response => {
    // error callback
  });
}

我创建了一个导航卫士，如果state不包含selectedCompanyId的真实值，则将调度该动作，并且仅在该动作返回的承诺得到解决后才继续执行该路线。

关于javascript - Vuex计算属性仅在更改路由然后又更改回时更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47985144/