CODEWITHSUNDEEP
javascriptvue.js
Paige
Paige

Reputation: 99

How to use variable globally in vuejs

So I have a vuejs project and want to use some variable (globally) in any of my components (Variable will not change its value). I created a variable called STEPS in somefile.js and imported it from components where I want to use.

// somefile.js

export const STEPS = {
  PROJECT: 'project',
  USER: 'user',
  SUMMARY: 'summary',
}

// maybe freeze object here because value will not be changed

// component1.vue

import { STEPS } from 'somefile.js'

export default {
   methods: {
     someMethod(value) {
       if (value === STEPS.PROJECT) {
         // do something
       }
     }
   }
}


// component2.vue

import { STEPS } from 'somefile.js'

export default {
   methods: {
     someMethod(value) {
       if (value === STEPS.USER) {
         // do something
       }
     }
   }
}

So this actually works? I don't get any errors or anything. But I'm just wondering .. I am not sure if it's okay to use it like this? Just making a .js file and import it anywhere in your code and use it?

So.. I found 2 ways how people use global variables in vuejs.

  1. using instance properties https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example
Vue.prototype.$STEPS = {
  PROJECT: 'project',
  USER: 'user',
  SUMMARY: 'summary',
}


created() {
   console.log(this.$STEPS)
}
  1. Using mixins https://v2.vuejs.org/v2/guide/mixins.html
var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

So my question is is it okay to use how I used global variable? Just making a variable in javascript file and importing it.. Or should I change it to using instance properties or mixins?

Upvotes: 1

Views: 4282

Answers (1)

Lars Schellhas
Lars Schellhas

Reputation: 359

Yes, the way you do it is totally fine. If you want to manage your data centrally where is can be accessed by all components (and can even be changed across all of them simultaneously), you could also have a look at Vuex. Here is also a great (but maybe outdated) tutorial on Vuex.

Upvotes: 2

Related Questions