Question

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

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

在另一个视图中，我需要检索属于所选公司的广告系列，因此我使用vue-resource在mount上执行此操作。

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仍未定义且我的获取请求失败。

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

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

据我所知，这是因为我的获取请求获得公司并选择第一个需要时间来完成。

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

Answer 1

我停止在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
  });
}

我创建了一个导航防护，如果状态不包含selectedCompanyId的真值，则会调度该操作，并且只有在解决了从操作返回的声明后才会继续执行该路径。

仅当路由更改然后更改回来时，Vuex计算属性才会更新

1 个答案: