vuex clean way to bind vuex objects to edit inputs

Question

Does any one have a clean way of binding vuex data to inputs, Say you want to hydrate an edit form with data from vuex, if you don't clone it to a local object before v-modeling it to the input you get mutations errors on input.

This gets particular messy with deep objects with arrays inside as a simple {...object} spread does not clone the nested arrays / objects and the nested arrays will still be tied to vuex.

This is what Im finding my self doing a lot

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
    })
  },

Use a deep cloning function. JSON.parse + JSON stringify if you have only have JSON datatypes, otherwise _.cloneDeep — Eric Guan
– Eric Guan, Commented Jun 20, 2020 at 22:13

codeWisperer · Accepted Answer · 2020-06-22 12:11:24Z

1

Consider using vuex getters that return a deep cloned version of the state data you need, otherwise as mentioned in the comments consider using lodash deep clone _.cloneDeep or JSON.parse(JSON.strigify(store.state.object))

using a vuex getter to return cloned state:

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

then in the components:

import {mapGetters} from 'vuex';

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

answered Jun 22, 2020 at 12:11

codeWisperer

861 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuex clean way to bind vuex objects to edit inputs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related