vuex чистый способ привязки объектов vuex для редактирования входов

Question

Есть ли у кого-нибудь чистый способ привязки данных vuex к входам. Скажем, вы хотите гидратировать форму редактирования данными из vuex, если вы не клонируете ее на локальный объект, прежде чем v-моделировать ее для ввода, который вы получить ошибки мутаций при вводе.

Это становится особенно беспорядочным с глубокими объектами с массивами внутри, поскольку простое распространение {... object} не клонирует вложенные массивы / объекты, а вложенные массивы все равно будут привязаны к vuex .

Это то, чем я много занимаюсь

created() {
    const productId = this.$route.params.id
    this.product = _.find(this.$store.state.vendor.products.list, { id: productId })
    this.getProduct(productId).then(response => {
      this.product = { ...response }
      const clonedVariants = []
      this.product.variants.data.forEach(variant => {
        clonedVariants.push({...variant})
      })
      this.product.variants = {}
      this.product.variants.data = clonedVariants;
      this.freshProduct = true
    })
  },

Answer 1

Рассмотрите возможность использования геттеров vuex , которые возвращают глубоко клонированную версию необходимых вам данных состояния, в противном случае, как упоминалось в комментариях, рассмотрите возможность использования loda sh deep clone _.cloneDeep или JSON.parse(JSON.strigify(store.state.object))

использование геттера vuex для возврата клонированного состояния:

const store = new Vuex.Store({
  state: {
    products: [
      { id: 1, text: '...' },
      { id: 2, text: '...' }
    ]
  },
  getters: {
    products: state => {
      return _.cloneDeep(state.products)
    }
  }
})

затем в компонентах:

import {mapGetters} from 'vuex';

  export default {
    computed: {
      ...mapGetters(['products'])
    },
    created() {
      const productId = this.$route.params.id
      this.product = _.find(this.products, { id: productId })
    },
}