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

Question

在我的应用程序的 main.js 中，我发送了一个操作，从我的 API 中获取公司并选择第一个。这个 Action 每次都派发，这里似乎没有失败。

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

在另一个 View 中，我需要检索属于所选公司的事件，因此我使用 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;
}

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

如果我刷新页面 selectedCompanyId 仍然未定义，我的获取请求失败。

如果我在此 View 上打开应用程序，selectedCompanyId 未定义且获取请求失败，但如果我路由到另一个 View 然后路由返回 selectedCompanyId 已加载请求成功。

如果我在另一个 View 上打开应用程序，然后路由到 View selectedCompanyId 已定义并且 get 请求成功。

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

我该如何解决这个问题？有没有更好的方法来完成我想做的事情？

Answer 1

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

我修改了 getCompaniesAndSelectFirst 操作以返回 promise :

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
  });
}

我创建了一个导航守卫，如果状态不包含 selectedCompanyId 的真实值，它会调度操作，并且只有在从操作返回的 promise 得到解决后才继续路由。