为什么不能在vue模板中使用window？

Question

我在 window 对象中设置了一个属性以便在全局范围内使用它，如下所示：

 window.configs.foo=true;

但是当这样使用它时：

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

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

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

---

我如何在 vueJs 模板中使用窗口对象？

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

Answer 1

好吧，替代方案是在 Vue 中使用 \(root。在您的 vue 实例中定义 `foo` 它将在所有组件中可用 `this.\)root.foo` 。

这是官方 文档

希望这可以帮助

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

Answer 2

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

相反，如果要在您的组件上设置一个以 window.configs.foo 为目标的 计算属性，您可以做什么：

 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

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

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

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

混入

也许出于某种原因你不想使用 vuex。那么跨多个组件重用逻辑的一种方法是 使用 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>`
})

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