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

是退货

请有人告诉我为什么在提交尚未发生时，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 更详细地说明了这一点。