Рекомендации по мутации Vuex - объединение состояния с полезной нагрузкой - PullRequest
Новая
       47

Рекомендации по мутации Vuex - объединение состояния с полезной нагрузкой

0 голосов
/ 04 мая 2020

Я пытаюсь избежать следующего кода с 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
    },
}

Я также хочу избежать определения объекта в моем состоянии, такого как «данные», где я бы назначил эту полезную нагрузку. Это швы, как ненужное вложение. 

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

Ответы [ 3 ]

2 голосов
/ 04 мая 2020

Если ключи объекта продукта всегда будут такими же, как измененные свойства состояния, вы можете установить каждое свойство с помощью метода set (), который изменяет свойство состояния root при сохранении реактивности: 

import Vue from 'vue'

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

Кроме того, объединение состояния с объектом продукта с использованием оператора распространения не работает из-за того, что оно клонирует все состояние в новый объект, который, очевидно, теряет реактивность существующего состояния.

1 голос
/ 04 мая 2020

Если вы передаете объект только с уже существующими реквизитами состояния, тогда вы можете использовать Object.assign: 

const mutations = {
    SET_PRODUCT_DATA(state, product) {
        Object.assign(state, product)
    },
}
1 голос
/ 04 мая 2020

Вы можете использовать Object.keys и перебирать их, чтобы скопировать все значения 

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