Vuex 계산 속성은 경로가 변경된 후 다시 변경된 경우에만 업데이트됩니다.

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

selectedCompanyIdVuex에서 선택한 회사의 ID를 반환하는 계산된 속성입니다.

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

문제는selectedCompanyId이 보기가 로드된 첫 번째 보기인 경우 이 시점에서 정의되지 않습니다.

페이지를 새로 고친 경우selectedCompanyId아직 정의되지 않았으며 가져오기 요청이 실패했습니다.

이 보기에서 응용프로그램을 열면,selectedCompanyId정의되지 않아 가져오기 요청이 실패하지만 다른 보기로 라우팅한 다음 다시 라우팅하는 경우selectedCompanyId로드되었으며 요청이 성공했습니다.

다른 보기에서 응용프로그램을 연 다음 보기로 라우트하는 경우selectedCompanyId이 정의되고 get 요청이 성공적으로 수행됩니다.

제가 이해하기로는 회사를 구하고 첫 번째 회사를 선택하는 제 get request가 완료되기까지 시간이 필요하기 때문입니다.

어떻게 해결해야 하나요?제가 하려는 일을 더 잘 할 수 있는 방법이 있을까요?

나는 더 이상 파견을 중단했습니다.getCompaniesAndSelectFirst의 행동.createdVue 인스턴스의 함수입니다.

수정했습니다.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작업에서 반환된 약속이 해결된 후에만 경로로 계속 이동합니다.

언급URL : https://stackoverflow.com/questions/47985144/vuex-computed-property-only-updates-if-route-is-changed-and-then-changed-back