将全局变量应用于 Vuejs

Question

我有一个 javascript 变量，我想在实例化时将其全局传递给 Vue 组件，因此每个注册的组件都将其作为属性或者可以全局访问。

注意::我需要将 vuejs 的这个全局变量设置为 READ ONLY 属性

Answer 1

您可以使用 Global Mixin 来影响每个 Vue 实例。您可以将数据添加到此 mixin，使 value/values 可用于所有 vue 组件。

要将该值设置为只读，您可以使用 this Stack Overflow answer 中描述的方法。

这是一个例子：

// This is a global mixin, it is applied to every vue instance. 
// Mixins must be instantiated *before* your call to new Vue(...)
Vue.mixin({
  data: function() {
    return {
      get globalReadOnlyProperty() {
        return "Can't change me!";
      }
    }
  }
})

Vue.component('child', {
  template: "<div>In Child: {{globalReadOnlyProperty}}</div>"
});

new Vue({
  el: '#app',
  created: function() {
    this.globalReadOnlyProperty = "This won't change it";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  In Root: {{globalReadOnlyProperty}}
  <child></child>
</div>

Answer 2

就Adding Instance Properties

比如所有的组件都可以访问一个全局的appName，你只要写一行代码：

Vue.prototype.$appName = 'My App'

或者在vue3中 app.config.globalProperties.$http = axios.create({ /* ... */ })

$ 不是魔法，它是 Vue 用于所有实例都可用的属性的约定。

或者，您可以 write a plugin 包括所有全局方法或属性。

Answer 3

您可以像这样使用 mixin 和更改 var。

// This is a global mixin, it is applied to every vue instance
Vue.mixin({
  data: function() {
    return {
      globalVar:'global'
    }
  }
})

Vue.component('child', {
  template: "<div>In Child: {{globalVar}}</div>"
});

new Vue({
  el: '#app',
  created: function() {
    this.globalVar = "It's will change global var";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  In Root: {{globalVar}}
  <child></child>
</div>

Answer 4

如果全局变量不应该被任何东西写入，包括 Vuejs，您可以使用 Object.freeze 来冻结您的对象。将它添加到 Vue 的视图模型不会解冻它。另一种选择是为 Vuejs 提供对象的冻结副本，如果该对象打算全局写入而不是由 Vue 写入：var frozenCopy = Object.freeze(Object.assign({}, globalObject))

Answer 5

你可以使用 Vuex 来处理你所有的全局数据

Answer 6

一种可能是在 index.html 处声明变量，因为它确实是全局变量。可以将 javascript 方法添加到 return 变量的值，并且它将是只读的。我确实喜欢：

假设我有 2 个全局变量（var1 和 var2）。只需将此代码添加到 index.html header：

  <script>
      function getVar1() {
          return 123;
      }
      function getVar2() {
          return 456;
      }
      function getGlobal(varName) {
          switch (varName) {
              case 'var1': return 123;
              case 'var2': return 456;
              // ...
              default: return 'unknown'
          }
      }
  </script>

可以为每个变量执行一个方法或使用一个带有参数的方法。

这个解决方案适用于不同的 vuejs mixins，它是一个真正的全局值。

Answer 7

在带有 createApp() 的 VueJS 3 中，您可以使用 app.config.globalProperties

像这样：

const app = createApp(App);

app.config.globalProperties.foo = 'bar';

app.use(store).use(router).mount('#app');

并像这样调用您的变量：

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})

doc: https://v3.vuejs.org/api/application-config.html#warnhandler

如果您的数据是反应性的，您可能需要使用 VueX。

Answer 8

在您的 main.js 文件中，您必须像这样导入 Vue :

import Vue from 'vue'

然后你必须像这样在 main.js 文件中声明你的全局变量：

Vue.prototype.$actionButton = 'Not Approved'

如果你想从另一个组件更改全局变量的值，你可以这样做:

Vue.prototype.$actionButton = 'approved'

https://vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example

Answer 9

in main.js（或任何其他 js 文件）

export const variale ='someting' 在 app.vue（或任何其他组件）

import {key} from '../main.js' (file location) 在数据方法中定义变量的键并使用它。

Answer 10

如果你想在多个组件中使用一个变量，但又不想污染全局作用域。在这些情况下，您可以通过在 Vue prototype:

上定义它们来使它们对每个 Vue instance 可用

Vue.prototype.$yourVariable = 'Your Variable'

请记住在您的项目入口点创建 Vue instance 之前添加此行，大多数时候它是 main.js

现在 $yourVariable 可用于所有 Vue instances，甚至在创建之前。如果我们运行:

new Vue({
  beforeCreate: function() {
    console.log(this.$yourVariable)
  }
})

然后"Your Variable"将被记录到控制台！

doc: https://vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example

如果想让这个变量不可变，可以使用静态方法Object.defineProperty():

Object.defineProperty(Vue.prototype, '$yourVariable', {
  get() {
    return "Your immutable variable"
  }
})

默认情况下，此方法将防止您的变量从 Vue prototype

中删除或替换

如果您想更进一步，假设您的变量是一个对象，并且您不希望对您的对象应用任何更改，您可以使用 Object.freeze():

Object.defineProperty(Vue.prototype, '$yourVariable', {
  get() {
    return Object.freeze(yourGlobalImmutableObject)
  }
})

将全局变量应用于 Vuejs

Apply global variable to Vuejs

vue.js

vue-component

vuejs2