将全局变量应用于Vuejs

Question

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

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

Answer 1

您可以使用Global Mixin来影响每个Vue实例.您可以向此mixin添加数据,使值/值可用于所有vue组件.

要使该值为只读,您可以使用此stackoveflow答案中描述的方法.

这是一个例子:

// This is a global mixin, it is applied to every vue instance
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

只需添加实例属性

例如,所有组件都可以访问全局appName,您只需编写一行代码:

Vue.prototype.$appName = 'My App'

$ 这不是魔术,它是Vue用于所有实例都可用的属性的约定.

或者,您可以编写包含所有全局方法或属性的插件.

Answer 3

在带有 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'
  }
})

文档：https : //v3.vuejs.org/api/application-config.html#warnhandler

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

Answer 4

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