Search code examples
javascriptvuejs2reactive-programmingvuex

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?

Solution

  • 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.