将全局变量应用于 Vuejs

Question

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

注意：：我需要将 vuejs 的这个全局变量设置为 只读 属性

原文由 Kendall 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需 添加实例属性

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

Vue.prototype.$appName = 'My App'

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

$ 并不神奇，它是 Vue 用于所有实例的属性的约定。

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

原文由 user2276686 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 Global Mixin 来影响每个 Vue 实例。你可以向这个 mixin 添加数据，使一个/多个值可用于所有 vue 组件。

要使该值只读，您可以使用 此 Stack Overflow 答案 中描述的方法。

这是一个例子：

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

原文由 asemahle 发布，翻译遵循 CC BY-SA 4.0 许可协议