How to use variable globally in vuejs

Question

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.

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)
}

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?

This is a correct way to do this for framework-independent globals. Vue 3 doesn't have instance properties that are accessible everywhere, so using mixins is not future-proof — Estus Flask
– Estus Flask, Commented Sep 10, 2021 at 5:51
What you are doing is perfectly fine, You can also do .env files cli.vuejs.org/guide/mode-and-env.html#environment-variables - This link is for vue cli but can work with webpack and other ways. — Michael Mano
– Michael Mano, Commented Sep 10, 2021 at 5:57
Yes this is perfectly fine. Only disadvantage of doing it like that is you can not access STEPS directly from the template... — Michal Levý
– Michal Levý, Commented Sep 10, 2021 at 8:05

Lars Schellhas · Accepted Answer · 2021-09-10 19:53:07Z

2

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.

answered Sep 10, 2021 at 19:53

Lars Schellhas

3592 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use variable globally in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related