在Vue模板中使用全局变量

Question

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

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

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

能否让Vue在这里不尝试绑定WHEEL_DRIVE？

- user2154171

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/

- ADM-IT

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实例之间共享全局状态。

您还可以将常量反映为组件数据的属性，但如果您的应用程序变得更大，请使用Vuex。

- Philip Feldmann

---

如果这是不可能的，那么这就有意义了，非常感谢。 将我的常量添加到 Vuex 中确实感觉有点奇怪，但如果这是惯例，我想我会遵循它。 - user2154171

很讽刺的是，我总是看到人们说“不要使用with!!!这是不好的实践！”而同时许多流行框架的深层内部机制却在某种程度上依赖它。特别是涉及转译的事情。 - ADJenks

Answer 3

你可以创建全局变量，以便所有组件都可以访问：

Vue.prototype.$variableName = 'My value'

- Sharhabeel Hamdan

Answer 4

这样做的一个（正确）方法是在视图模型初始化时设置数据属性值：

,data: function() {
  return { myVar1: 2
          ,myConst1:WHEEL_DRIVE.ALLROAD
          ,myOtherValue:3.14 };
 } 

但是你可以使用现代浏览器的方法访问全局变量（如Map对象），例如：

 printFromGMap: function(keyName,propName) {
               return (('myMap' in globalThis) 
                   && (globalThis.myMap.has(keyName))
                   && (propName in globalThis.myMap.get(keyName))) 
                  ? `${globalThis.myMap.get(keyName)[propName]}` : '';
            }

由于globalThis现在是一个标准的东西（在这段代码中，问号是三元运算符的一部分，反引号返回一个模板字面量）。

- Nathan