How to store non-reactive data in Vuex?
One can also add a property _isVue
to the object to avoid making it reactive.
commit('setNonReactiveObject', Object.assign(data, { _isVue: true })
This approach can be useful to make data non-reactive when there's no way to control how the data is stored in the store. For example when store data is completely replaced client-side to "hydrate" a server-side rendered website (e.g. Nuxt).
This is undocumented and might break in the future. At least the source code has a comment indicating that this property is used for this internally. And here is where the property is checked before observing the object.
I was able to remove the "reactiveness" by doing something like this
// create new variable and remove reactiveness, does a deep clone
var someNewNonReactiveVar = JSON.parse(JSON.stringify(someReactiveVar));
Freeze the object before adding it to the store:
Object.freeze(nonReactiveObjectWithSomeNestedData )
Vue won't make frozen objects reactive.
Note: you should freeze object before it comes into Vuex mutation/action:
this.$store.dispatch('moduleName/setNonReactiveObject',
Object.freeze(nonReactiveObjectWithSomeNestedData));
Inside mutation function the payload-parameter will be already reactive.