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.