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

Question

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

window.configs.foo=true;

但是当像这样使用它时：

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

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

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

---

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

Answer 1

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

\n

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

\n

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

\n

更新：

\n

如果您必须在很多站点中重复使用它，您可以执行以下两件事：

\n

维埃克斯

\n

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

\n

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

\n

你可以通过标准vuex 突变来修改它。

\n

\xc2\xa0Mixins

\n

也许由于某种原因你不想使用 vuex。那么跨多个组件重用逻辑的一种方法是使用 mixins。

\n

const configAwareMixin = {\n  computed: {\n    showButton() {\n      return window.configs.foo;\n    }\n  }\n}\n\n// And then in your component:\n\nVue.component(\'stuff\', {\n  mixins: [buttonAwareMixin],\n  template: `<div><v-btn v-if="showButton"></v-btn></div>`\n}) \n

\n

Answer 2

嗯，替代方案就是在Vue中使用$root。在您的 vue 实例中定义foo，它将在所有具有this.$root.foo.

这是官方文档

希望这可以帮助