提交promise的then（）后，Vuex3突變不起作用

Question

我有一個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));
        }
    }
}

當我從vue實例中store.dispatch('update') ，它會忠實地將foo更改為“ bar”。 APIwrapper許諾完成后，將調用update_foo突變，將其轉儲出商店將顯示state.foo等於“ not bar”，但該更改未反映在我的模板中。

我對重寫我的api包裝器對象不是很瘋狂。 有什么特別的原因為什么它不起作用並且可以解決？

編輯：這是我的其余設置。

模板如下所示：

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

Answer 1

在一些集思廣益的幫助下，我設法解決了這個問題。 我在頁面上有兩個Vue實例，這些實例通過共享基類使用一個公共變量存儲該實例。 因此，一個覆蓋另一個。 因為實例仍然存在，所以瞬時突變起作用了，但是到API響應時，實例已被覆蓋，更新失敗。

我很馬虎。 感謝大家的時間。