在vue模板中使用全局变量

Question

我正在尝试在我的 vue 模板中使用全局变量。我尝试使用它而不在数据字段中设置它，因为它们实际上是一些全局常量。

<template v-if="item.WheelDrive === WHEEL_DRIVE.ALLROAD">

这会给我“属性或方法未在实例上定义，但在渲染期间引用”错误。

是否可以指示 vue 不要尝试在这里绑定 WHEEL_DRIVE？

Answer 1

您可以使用computed甚至创建自定义mixin来获取全局值：

<div id="app">
  <p>
    Example 1: {{myGlobalVariable}}
  </p>
  <p>
    Example 2: {{getGlobal('globalVariable')}}
  </p>
</div>

<script>
window.globalVariable = 'I am a global thing';

new Vue({
  el: "#app",
  data: {
  },
  computed: {
        myGlobalVariable: function () {
            return globalVariable;
        },
    },
  methods: {
    // this could be a mixin (see vue docs how to create a global mixin)
    getGlobal(propertyName) {
        if (propertyName) {
            //return this.$el.ownerDocument.defaultView[propertyName];
            //return eval(propertyName); // !!! be careful with that, it opens a hole into security
            return window[propertyName];
        } else {
            return null;
        }
    }
  }
})
</script>

根据您所在的位置，您还可以使用：

this[propertyName];
self[propertyName];
window[propertyName];
top[propertyName];
globalThis[propertyName];
eval(propertyName); // !!! be careful with that, it opens a hole into security

如果您正在寻找全局函数：

window[functionName](arg1, arg2);

请参阅以下示例https://jsfiddle.net/FairKing/u7y034pf/

Answer 2

就我而言，这是不可能的，因为：

每当你在 vue 中使用模板时，你也在以一种或另一种方式使用 vue 模板编译器。所有模板表达式都会变成渲染函数，模板编译器生成的源代码如下所示：

with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No message.")])])}

请注意with(this)开头的声明。因此，剩余函数中的每个引用将始终在实例上访问。

然而，即使有可能，这也将是一种反模式：

Vue 在状态管理方面比较有主见。即使您在这里处理的是常量，vue 仍然鼓励您使用vuex在 vue 实例之间共享全局状态。

您也可以将您的常量反映在 vue 实例中作为组件数据的属性 - 如果您的应用程序变得更大，我确实鼓励您使用 vuex。