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

我很马虎。 感谢大家的时间。