将全局变量应用于Vuejs

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

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

您可以使用全局混合来影响每个Vue实例。您可以将数据添加到此mixin，从而使一个或多个值可用于所有vue组件。

要将值设为只读，可以使用此stackoveflow答案中描述的方法。

这是一个例子：

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

只是添加实例属性

例如，所有组件都可以访问global appName，您只需编写一行代码：

Vue.prototype.$appName = 'My App'

$ 不是魔术，这是Vue用于所有实例可用的属性的约定。

或者，您可以编写一个包含所有全局方法或属性的插件。

您可以使用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>

您可以使用Vuex处理所有全局数据

如果不应该使用Vuejs等任何东西写入全局变量，则可以使用它Object.freeze来冻结对象。将其添加到Vue的viewmodel不会解冻它。如果该对象旨在全局写入，但不是由Vue编写，则另一个选择是为Vuejs提供对象的冻结副本：var frozenCopy = Object.freeze(Object.assign({}, globalObject))

在带有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。

一种可能性是在index.html上声明该变量，因为它确实是全局的。可以添加一个javascript方法来返回变量的值，并且它将是只读的。我确实喜欢这样：

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

  <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之间工作，这确实具有全球价值。

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

import Vue from 'vue'

然后，您必须在main.js文件中声明全局变量，如下所示：

Vue.prototype.$actionButton = 'Not Approved'

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

Vue.prototype.$actionButton = 'approved'