如何用Vue对全局变量做出反应?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用Vue对全局变量做出反应?相关的知识,希望对你有一定的参考价值。

我有一个注入了一些全局配置对象的移动webview:

Vue.prototype.$configServer = {
  MODE: "DEBUG",
  isMobile: false,
  injected: false,
  version: -1,
  title:"App",
  user: null,
  host: "http://127.0.0.1:8080"
}

后来WebView注入了这个:

Vue.prototype.$configServer = {
  MODE: "DEBUG",
  title: "App",
  version: "2.0",
  isMobile: true,
  injected: true,
  host: "http://127.0.0.1:8081"
}

并尝试将其用于组件:

const HomePage = {
  key: 'HomePage',
  template: '#HomePage',
  components: { toolbar },
  data() {
    return {
      items: [
        {name:"Login", link:"login"},
      ]
    }
  },
  computed:{
    config() {
      return Vue.prototype.$configServer
    }
  },
};

但是页面未更新。如何应对变化?

P.D:我确认使用safari调试工具更新了对象。还要在本地html中测试。

答案

您可以将其作为数据选项添加到主vue实例中,而不是将配置放入Vue的原型中,这将保证您的所有配置属性都是被动的。如文档中所述

当您将纯javascript对象作为其数据选项传递给Vue实例时,Vue将遍历其所有属性并使用Object.defineProperty将它们转换为getter / setter。

说过每当你更新你的配置属性时,vue会对它作出反应。

现在让我们看看如何在代码中执行此操作:

new Vue(){
    data:{ //only place where data is not a function
        configServer = {
              MODE: "DEBUG",
              isMobile: false,
              injected: false,
              version: -1,
              title:"App",
              user: null,
              host: "http://127.0.0.1:8080"
        } 
    }
}

现在,无论何时需要访问配置,您都可以使用$ root从任何组件直接访问它。像this.$root.configServer

那就是它。

我希望它有所帮助。

另一答案

有3种方法可以达到你想要的效果

1-确保在组件中导入vue

import 'Vue' from vue
...
...
...
 computed:{
    config() {
      return Vue.prototype.$configServer
    }

2-如果你不想导入vue,你可以直接从任何实例使用proto访问原型。

computed:{
        config() {
          return this.__proto__.$configServer
        }

3-正如您在原型中添加了配置,您可以使用this直接从vue实例访问

computed:{
    config() {
      return this.$configServer
    }
  },

无论你的风格与你的风格相匹配,你都可以选择。

但我个人建议使用第三个,因为访问实例的原型是一种反模式。

我希望它有所帮助。

以上是关于如何用Vue对全局变量做出反应?的主要内容,如果未能解决你的问题,请参考以下文章

Vue 没有对计算的 props 更改做出反应

在 Windows/Linux/Mac 上的 Java 程序中对全局热键做出反应?

有没有办法让我的二进制文件对 Linux 中的一些全局热键做出反应?

如何用 Mason 定义全局变量

如何对儿童可见度的变化做出反应?

QT5 如何用两个事件作画?