Vuex 状态返回不正确的值

Question

我遇到了一个问题，我从商店中获得了意外的价值。

我有一个组件只有一种方法：

methods: {
    setProduct(product) {
        this.$store.commit('basket/empty');
    
        console.log(this.$store.state.basket.items);
  
        this.$store.commit("basket/addToBasket", {
            id: product.id
        });
    },
},

它只是清空购物篮并添加一个新产品，因此购物篮中可以随时存在一个产品。

我的问题是控制台日志返回了一个产品。

而不是空数组。如果我删除

this.$store.commit("basket/addToBasket", {
    id: product.id
});

是returns

有人能告诉我为什么 console.log 在提交尚未发生时返回项目吗？

Basket.js

const state = {
    items: []
};

const getters = {};
const actions = {};

const mutations = {
    empty (state) {
        state.items = [];
    },
    addToBasket (state, product) {
        state.items.push(product);
    },
};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
};

Answer 1

开发人员控制台能够在记录引用变量（如数组或对象）时更新数据。

当您在控制台中单击以展开时，它会按您单击控制台时的原样显示变量，而不是记录它时的变量。这意味着它不一定反映记录时 items 变量的值。

在这种情况下，日志发生时items数组为空，但当您单击展开属性时，数组包含新的id。

这里有一个 demo 可以进一步说明这一点。

Vuex 状态返回不正确的值

Vuex state returning incorrect value

javascript

browser

console

vue.js

vuex