javascript - 如何在 vuejs 中全局使用变量

问题描述

所以我有一个 vuejs 项目，想在我的任何组件中使用一些变量（全局）（变量不会改变它的值）。我创建了一个名为STEPSin的变量，somefile.js并将其从我想要使用的组件中导入。

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

所以这真的有效吗？我没有收到任何错误或任何东西。但我只是想知道..我不确定这样使用它是否可以？只是制作一个 .js 文件并将其导入代码中的任何位置并使用它？

所以.. 我发现了人们在 vuejs 中使用全局变量的两种方式。

使用实例属性 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)
}

使用 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" }
  }
})

所以我的问题是可以使用我如何使用全局变量吗？只需在 javascript 文件中创建一个变量并导入它。或者我应该将其更改为using instance propertiesormixins吗？

标签： javascriptvue.js

javascript - 如何在 vuejs 中全局使用变量

问题描述

解决方案

推荐阅读