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://vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example

Vue.prototype.$STEPS = {
  PROJECT: 'project',
  USER: 'user',
  SUMMARY: 'summary',
}


created() {
   console.log(this.$STEPS)
}

2. Using mixins https://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?