为什么不能在 vue 模板中使用窗口？答案

【问题标题】：why can't use window in vue template?为什么不能在 vue 模板中使用窗口？
【发布时间】：2019-08-14 19:42:39
【问题描述】：

我在窗口对象中设置了一个属性以全局使用它，如下所示：

window.configs.foo=true;

但是当这样使用它时：

<v-btn v-if="window.configs.foo">go</v-btn>

在控制台中，我收到此错误：

[Vue 警告]：实例上未定义属性或方法“窗口” 但在渲染期间引用。确保该属性是反应式，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。

如何在 vueJs 模板中使用 window 对象？

【问题讨论】：

你不应该在 vue 应用程序中使用全局窗口变量。这是因为 window var 可以被任何东西作为目标，甚至是不属于您的应用程序的 JS 代码。相反，您可以使用environment variables（如果目标是拥有不同的配置设置），或者您可以使用VueX（如果目标是让各种数据全局可用）
@Kokodoko，谢谢。我明白你说的。
@Kokodoko 当然你可以在 Vue 应用程序中使用窗口变量。你不应该做的是包含不属于你的应用程序的 JS 代码。为什么你要包含不属于你的应用程序的 JS 代码？

标签： javascript vue.js

【解决方案1】：

因为v-if 旨在用于组件的属性。您不能 v-if 覆盖全局范围内或组件数据或属性之外的变量。

如果在您的组件上设置一个以window.configs.foo 为目标的computed property，您可以做些什么：

new Vue({ // or maybe a component, this depend on how you're using it
    template: `<div>
      <v-btn v-if="showMyButton">...</v-btn>
    </div>`
    computed: {
      showMyButton() {
        return window.configs && window.configs.foo;
      }
    }
})

更新：

如果您必须在很多网站中重复使用它，您可以做两件事：

Vuex

Using vuex 将showMyButton 设置为 vuex 状态。然后您可以通过以下方式访问它：

v-if="$store.state.showMyButton"

你可以通过标准vuex mutations修改它。

混合

也许出于某种原因你不想使用 vuex。那么在许多组件中重用逻辑的方法是to use mixins。

const configAwareMixin = {
  computed: {
    showButton() {
      return window.configs.foo;
    }
  }
}

// And then in your component:

Vue.component('stuff', {
  mixins: [buttonAwareMixin],
  template: `<div><v-btn v-if="showButton"></v-btn></div>`
})

【讨论】：

我有很多组件需要这个变量。而且我不喜欢在每个组件中定义计算变量。你知道我应该做什么吗？

【解决方案2】：

嗯，替代方法是在 Vue 中使用 $root。在你的 vue 实例中定义foo，它将在所有带有this.$root.foo 的组件中可用。

这里是官方docs

希望对你有帮助

【讨论】：

this.$root 没有在模态组件中定义:(
它不会处于模态，因为模态会传递来自解除事件的数据。