약속의 then()을 커밋하면 Vuex3 변환이 작동하지 않음

약속의 then()을 커밋하면 Vuex3 변환이 작동하지 않음

다음과 같은 vuex 스토어가 있습니다.

new Vuex.Store({
    state: {
        foo: "initial value"
    },
    mutations: {
        update_foo (state, payload) {
            state.foo = payload;
        }
    },
    actions: {
        update (context) {
            context.commit("update_foo", "bar");
            APIwrapper("api url to get data")
                .then(response => context.commit("update_foo", "not bar"))
                .catch(e => console.error(e));
        }
    }
}

내가 할 때store.dispatch('update')내 vue 인스턴스에서 foo를 바(bar)로 바꿔놨어APIwrapper 약속이 실행되면 update_foo 변환이 호출되고 스토어를 덤프아웃하면 그 상태가 나타납니다.foo는 "not bar"이지만 이 변경은 템플릿에 반영되지 않습니다.

api wrapper 오브젝트를 다시 쓰는 것은 그다지 좋아하지 않습니다.이 방법이 효과가 없는 특별한 이유와 대처 방법이 있습니까?

편집: 나머지 설정은 다음과 같습니다.

템플릿은 다음과 같습니다.

<div>
    <i :foo="foo" v-html="foo"></i>
</div>

vue 인스턴스는 다음과 같습니다.

new Vue({
    store,
    el: '#selector',
    template: template,
    beforeCreate: function () {
        store.dispatch('update');
    },
    computed: {
        foo: () => store.state.foo,
    },
});

브레인스토밍의 도움으로 나는 그 문제를 뿌리뽑을 수 있었다.페이지에 공유 기본 클래스를 통해 공통 변수를 사용하여 인스턴스를 저장하는 Vue 인스턴스가 두 개 있었습니다.그래서 하나는 다른 하나를 덮어쓰고 있었군요.인스턴스가 아직 존재하기 때문에 즉각적인 돌연변이가 작동했지만 API가 응답할 때 인스턴스는 덮어쓰기되어 업데이트가 실패하고 있었습니다.

내 입장에서는 엉성하다.시간 내주셔서 감사합니다.

언급URL : https://stackoverflow.com/questions/48346186/vuex3-mutation-doesnt-work-when-committed-the-then-of-a-promise