CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-routervuex
Suren
Suren

Reputation: 81

Vuex computed property only updates if route is changed and then changed back

In main.js of my app I dispatch an action that gets companies from my API and selects the first. This action dispatches every time, doesn't seem to fail here.

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

In another view I need to retrieve campaigns that belong to the selected company, so I do this on mount with 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 is my computed property that returns the id of the selected company in Vuex. 

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

The issue is selectedCompanyId is undefined at this point if this is the first view that's loaded.

If I refresh the page selectedCompanyId is still undefined and my get request fails.

If I open the application on this view, the selectedCompanyId is undefined and the get request fails, but if I route to another view and then route back selectedCompanyId has loaded and the request is successful.

If I open the application on another view, and then route to the view selectedCompanyId is defined and the get request is successful.

As I understand it this is because my get request that gets companies and selects the first one needs time to complete.

How can I solve this? Is there a better way to do what I'm trying to do?

Upvotes: 1

Views: 535

Answers (1)

Suren
Suren

Reputation: 81

I stopped dispatching the getCompaniesAndSelectFirst action in the created function of the Vue instance.

I modified the getCompaniesAndSelectFirst action to return a 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
  });
}

I created a navigation guard that dispatches the action if state does not contain a truthy value for selectedCompanyId, and only continues to the route once the promise returned from the action is resolved.

Upvotes: 1

Related Questions