리스트 렌더링에서의 Vuex 및 반응성

리스트 렌더링에서의 Vuex 및 반응성

그래서 간단한 가게가 있습니다.

const state = {
    cart: []
};

카트에 아이템이 있을 때의 모습은 다음과 같습니다.

[
    {
        id: 1,
        name: 'My first product',
        price: 3,
        quantity: 3
    },
    {
        id: 2,
        name: 'My second product',
        price: 2,
        quantity: 7
    }
]

이 오브젝트에 대한 변환은 다음과 같습니다.

ADDPRODUCTTOCART (state,product,quantity) {
    for(var i = 0; i < state.cart.length; i++) {
        if(state.cart[i].id === product.id) {
            state.cart[i].quantity += quantity;
            return ;
        }
    }
    product.quantity = quantity;
    state.cart.push(product);
}

보시는 바와 같이,product에게cart먼저 같은 상품이 카트에 들어있는지 확인합니다.만약 그렇다면, 우리는 그것을 변경한다.quantity값이 아닐 경우 제품 객체의 수량 속성을 설정한 후 카트에 밀어 넣습니다.

참고로 이 변환을 트리거하는 액션은 다음과 같이 기술되어 있습니다.

export const addProductToCart = ({dispatch}, product, quantity) => {
    dispatch('ADDPRODUCTTOCART', product, quantity);
};

다음으로 컴포넌트가 있습니다.

export default {
    computed: {
        total() {
            var total = 0;
            for(var i = 0; i < this.cart.length; i++) {
                total += this.cart[i].price * this.cart[i].quantity;
            }
            return total;
        }
    },
    vuex: {
        getters: {
            cart: function (state) {
                return state.cart;
            }
        }
    }
}

그total계산된 속성은 잘 작동합니다. 내가 수량을 변경하면 자동으로 업데이트됩니다.product의 오브젝트cart.

근데 이걸 보여주려고 하면quantity의 재산v-for목록, 업데이트되지 않습니다.quantity변경:

<li v-for="product in cart" track-by="id">
    productID: {{ product.id }},
    quantity: {{ product.quantity }}
</li>

https://jsfiddle.net/Lgnvno7h/2/

에서 데이터를 전달하려면data옵저버를 제거해야 합니다.

JSON.parse(JSON.stringify(this.products[0]))

언급URL : https://stackoverflow.com/questions/37818570/vuex-and-reactivity-in-list-rendering