在 Vuex 中更新数组（状态）中对象值的最佳方法

Question

目前，我使用 Vuex 在 Vue 中制作了一个简单的购物车。我遇到的问题是我正在更新购物车对象中产品的数量，但这不会在前端视图上更新（它不是反应式的）。

我目前所做的是更新 cart 数组中的一个对象值，为了让它工作，我需要将现有的购物车设置为一个空数组，然后我重新应用具有新值的旧购物车状态。

更新数组中对象值的最佳方法是什么？

以下是我的模块（vuex）中的以下相关数据：

    namespaced: true,
    state: {
        cart: [],
        products: [
            {
                id: 2,
                name: 'Product sweater 2',
            },
            {
                id: 1,
                name: 'Product sweater',
            }
        ]
    },
    mutations: {

        update(state, product) {

            const index = state.cart.findIndex(x => x.id === product.id)

            if (index !== -1) {
                state.cart[index].quantity++
                state.cart = [
                    ...state.cart
                ]
            } else {
                product.quantity = 1
                state.cart.push(product)
            }
        },
   }

Answer 1

您可以使用 Vue.set 和 Vue.delete 来更改 vue.js 中的数组和对象。 Vue.set 是一个工具，它允许我们向已经反应的对象添加和更改属性。

Vue.set - API

Reactivity in Depth

Answer 2

如果您发送对象的索引会更好，这样可以轻松更新特定值而无需搜索数组中的项目，否则您可以按照以下方法进行

mutations: {
    update(state, product) {
        // Find index of the item to be updated
        const itemIndex = state.cart.findIndex(x => x.id === product.id)
        state.cart[itemIndex] = product;
    }
}

Answer 3

你可以试试这样的。代码不言自明

mutations: {
    update(state, product) {
        // Find product index in cart
        const index = state.cart.findIndex(x => x.id === product.id)
        if (index !== -1) {
            // If product is found, update properties
            let productFound = state.resources[index]
            productFound.quantity++
            // Update the product in state
            state.cart = [...state.cart.slice(0, index), { ...productFound, ...product }, ...state.cart.slice(index + 1)]
        } else {
            // Add product to state
            product.quantity = 1
            state.cart.push({ ...product })
        }
    }
}