I want to store object in vue, it should be available for entire instance and not be reactive. Normally (with reactive) I would use ‘data’ like this:
new Vue({ data: myObject })
But in fact myObject don’t need to change so I think making it reactive is bad. Is there any method to do this?
Advertisement
Answer
You can use Vue Instance Properties.
There may be data/utilities you’d like to use in many components, but you don’t want to pollute the global scope. In these cases, you can make them available to each Vue instance by defining them on the prototype:
Vue.prototype.$appName = 'My App'
Now $appName is available on all Vue instances, even before creation. If we run:
new Vue({ beforeCreate: function () { console.log(this.$appName) } })
Reference: Link
Or
You can use Vuex state for that data property and define mutations only if you want to change the value.