title: How to use variable globally in vuejs
body: <p>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 <code>STEPS</code> in <code>somefile.js</code> and imported it from components where I want to use.</p>
  <pre><code>// somefile.js
  
  export const STEPS = {
    PROJECT: 'project',
    USER: 'user',
    SUMMARY: 'summary',
  }
  
  // maybe freeze object here because value will not be changed
  </code></pre>
  <pre><code>// component1.vue
  
  import { STEPS } from 'somefile.js'
  
  export default {
     methods: {
       someMethod(value) {
         if (value === STEPS.PROJECT) {
           // do something
         }
       }
     }
  }
  
  </code></pre>
  <pre><code>// component2.vue
  
  import { STEPS } from 'somefile.js'
  
  export default {
     methods: {
       someMethod(value) {
         if (value === STEPS.USER) {
           // do something
         }
       }
     }
  }
  
  </code></pre>
  <p>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?</p>
  <p>So..
  I found 2 ways how people use global variables in vuejs.</p>
  <ol>
  <li>using instance properties
  <a href="https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example" rel="nofollow noreferrer">https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example</a></li>
  </ol>
  <pre><code>Vue.prototype.$STEPS = {
    PROJECT: 'project',
    USER: 'user',
    SUMMARY: 'summary',
  }
  
  
  created() {
     console.log(this.$STEPS)
  }
  
  </code></pre>
  <ol start="2">
  <li>Using mixins
  <a href="https://v2.vuejs.org/v2/guide/mixins.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/mixins.html</a></li>
  </ol>
  <pre><code>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)
      // =&gt; { message: &quot;goodbye&quot;, foo: &quot;abc&quot;, bar: &quot;def&quot; }
    }
  })
  </code></pre>
  <p><strong>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 <code>using instance properties</code> or <code>mixins</code>?</strong></p>