액션을 발송한 후 vuex 저장소 상태 가져오기

액션을 발송한 후 vuex 저장소 상태 가져오기

Laravel 6 + Vue + Vuex에서 채팅 애플리케이션을 만들고 있어.vuex 스토어에 전화를 걸어 디스패치 작업이 완료된 후 상태를 확인한 후 내 vue 구성 요소에서 해당 상태를 처리하고 싶다.

ChatWindow 구성 요소

mounted: function () {
    this.$store.dispatch('setContacts').then(() => {
        console.log('dispatch called')
        // I want to call the getter here and set one of the data property
    });
}

action.js

setContacts: (context) => {
    axios.post('/users').then(response => {
        let users = response.data;
        // consoled for testing
        console.log(users);
        context.commit('setContacts', users);
    });
}

돌연변이.js

setContacts: (state, users) => {
    state.contacts = users;
},

아래 스크린샷을 참조하십시오.setContacts in action.js보다 먼저 디스패치 방법이 실행된다.

출동 조치 완료하고 게이터에게 전화해야 해.(연락처 상태를 효과적으로 설정함).그럼 이렇게 getContacts getter를 통해서 연락처를 얻고 싶다.

getters.js.

getContacts: (state) => {
    return state.contacts;
}

나는 또한 그 때 계산된 부동산에 전화를 걸어 보았으나 소용이 없었다.또한 setContacts inaction.js의 setContacts in action.js 다음에 탑재된 실행에서 'dispatch calling'을 실행해야 하지 않을까?고마워!

다른 약속에 공리전화를 끼워넣을 수도 있겠지

return new Promise((resolve, reject) => {

   axios.post('/users')
     .then(response => {
        let users = response.data;
        // consoled for testing
        console.log(users);
        context.commit('setContacts', users);
        resolve('Success')
     })
     .catch(error => {
        reject(error)
     })

})

그리고 나서

this.$store.dispatch('setContacts')
   .then(() => {
       console.log('dispatch called')
       console.log('getter ', this.$store.getters.contacts)
   });

무슨 일 있으면 연락 주세요.내가 시도했던 작은 데모를 위해 작동하고 있었다.

참조URL: https://stackoverflow.com/questions/60704078/get-vuex-store-state-after-dispatching-an-action