Skip to content
Advertisement

Vue non reactive data available on instance

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.

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement