Vuex Mutation Best Practices - Merging State with Payload

Question

I'm trying to avoid the following code with 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
    },
}

However if I try to merge the state object with my payload it doesn't work (I believe this is to do with how vue handles reactivity but I don't fully understand that yet).

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

I also want to avoid defining an object within my state like 'data' where I would assign this payload. This seams like unnecessary nesting.

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

Answer 1

If product object keys will always be the same as modified state properties, you can chose to set each property with set() method, which modify a state root property while preserving reactivity:

import Vue from 'vue'

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

Also, merging state with the product object, using spread operator does not work due to the fact that it clones the entire state into a new object, which evidently loses the reactivity of the existing state.