Vuex 상태가 잘못된 값을 반환함

Vuex 상태가 잘못된 값을 반환함

상점에서 예상치 못한 값을 받는 문제가 있습니다.

다음 한 가지 방법을 사용하는 구성 요소가 있습니다.

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가 아직 커밋되지 않은 아이템을 반환하는 이유를 알려주실 수 있나요?

바스켓.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
};

개발자 콘솔은 Array 또는 Object와 같은 참조 변수를 기록할 때 데이터를 업데이트할 수 있습니다.

콘솔에서 를 클릭하여 펼치면 기록된 시간이 아니라 콘솔을 클릭할 때의 변수가 그대로 표시됩니다.즉, 이 값은 반드시 이 값을 반영할 필요는 없습니다.itemsvariable을 설정합니다.

이 경우,items로그가 발생할 때는 어레이가 비어 있지만 을 클릭하여 속성을 확장할 때까지 어레이에 새 ID가 포함됩니다.

여기에 이것을 좀 더 설명하는 데모가 있습니다.

언급URL : https://stackoverflow.com/questions/66318274/vuex-state-returning-incorrect-value