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

Question

내 앱의 main.js에서 회사 API를 가져 와서 첫 번째를 선택하는 작업을 실행합니다. 이 액션은 매번 디스패치되지만 여기서 실패하지는 않습니다.

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

내가 선택한 회사에 속한 캠페인을 검색해야하는 또 다른 관점에서

, 그래서 나는 VUE-자원과 마운트에서이 작업을 수행.

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

getCompaniesAndSelectFirst 작업을 Vue 인스턴스의 created 함수에서 전달하는 작업이 중지되었습니다.

나는 약속을 반환 할 getCompaniesAndSelectFirst 조치를 수정 : 상태가 selectedCompanyId에 대한 truthy 값을 포함하지, 그리고 약속 번 노선에 계속에만 않을 경우 나는 액션을 전달 탐색 가드를 생성

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

작업에서 반환 된 문제가 해결되었습니다.