2

だから私は単純な店を持っています:

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/

4

1 に答える 1

1

of コンポーネントからデータを渡したい場合はdata、オブザーバーを削除する必要があります。

JSON.parse(JSON.stringify(this.products[0]))
于 2016-06-14T20:10:08.767 に答える