Vuex突变最佳实践--合并状态与有效载荷

Question

我试图用Vuex避免以下代码。

//Product.js
const mutations = {
    SET_PRODUCT_DATA(state, product) {
        state.title = product.title
        state.variantId = product.variantId
        state.handle = product.handle
        state.tags = product.tags
        state.productType = product.productType
        state.featureImage = product.featureImage
        state.vendor = product.vendor
        state.description = product.description
        state.images = product.images
        state.presentmentPrices = product.presentmentPrices
        state.available = product.available
        state.quantity = product.quantity
        state.length = product.length
        state.width = product.width
        state.height = product.height
        state.weight = product.weight
        state.features = product.features
        state.sizeMeta = product.sizeMeta
        state.swatch = product.swatch
    },
}

然而，如果我试着将状态对象与我的有效载荷合并，它就无法工作（我相信这与Vue如何处理反应性有关，但我还没有完全理解）。

const mutations = {
    SET_PRODUCT_DATA(state, product) {
        state = { ...state, ...product} //doesn't work
    },
}

我还想避免在我的状态中定义一个像'data'这样的对象来分配这个有效载荷。这似乎是不必要的嵌套。

const mutations = {
    SET_PRODUCT_DATA(state, product) {
        state.data = product //avoid 🤮
    },
}

Answer 1

如果产品对象键将始终与修改后的状态属性相同，可以选择用set()方法设置每个属性，在保留反应性的同时修改一个状态根属性。

import Vue from 'vue'

SET_PRODUCT_DATA(state, product) {
    Object.keys(product).forEach(key => {
      Vue.set(state, key, product[key])
    }
},

另外，将状态与产品对象合并，使用spread操作符是行不通的，因为它会将整个状态克隆到一个新的对象中，这显然会失去现有状态的反应性。

Answer 2

您可以使用 Object.keys 并遍历它们以复制所有的值。

const mutations = {
    SET_PRODUCT_DATA(state, product) {
        Object.keys(product)
              .forEach(key => {
                state[key] = product[key]
    },
}

Answer 3

如果你只传递一个已经存在状态道具的对象，那么你可以使用Object.assign。

const mutations = {
    SET_PRODUCT_DATA(state, product) {
        Object.assign(state, product)
    },
}