Vue Immutable help mixin

Why?

Sometimes we need to edit some data which has been saved on the server using a form. Data in vue is mutable so when we edit state in the form it will change the state in the store. This makes data not predictable. When we use some store like vuex to manage the whole state of our app, it's important to follow flux, this mixin will help us manage the state.

Install

npm i vue-immutable-helper-mixin

Usage

You can use it as a global mixin

import vueImmutableHelperMixin from 'vue-immutable-helper-mixin'

Vue.mixin(vueImmutableHelperMixin)

or just as a component mixin

Vue.component('my-component', {
  mixins: [vueImmutableHelperMixin]
})

then tell your component which props you want to make it immutable

Vue.component('my-component', {
  mixins: [vueImmutableHelperMixin],
  
  data: function () {
    return {
      props_to_immutable: ['msg']
    }
  }
  
})

IMPORTANT: Don't use it in sync props

it will make a deep copy for the props and put the original data to "name_immutable_cache" and watch it. Everytime the original data changes it copy again.