当提交承诺的 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 响应时，实例已被覆盖并且更新失败。

我马虎。感谢大家的宝贵时间。

当提交承诺的 then() 时，Vuex3 突变不起作用

Vuex3 mutation doesn't work when committed the then() of a promise

javascript

vuex