javascript - 当提交 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 promise 实现了它的功能，就会调用 update_foo 突变，转储存储显示 state.foo 等于“not bar”，但该更改未反射(reflect)在我的模板中。

我不重写我的 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 实例，它们通过共享基类使用公共(public)变量来存储实例。因此，一个正在覆盖另一个。瞬时突变起作用是因为实例仍然存在，但当 API 响应时，实例已被覆盖并且更新失败。

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