Javascript 如何使用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
    }
  },
};

但是，该页面不会更新。如何应对变化

---

注意：我确认该对象已使用safari调试工具更新。也可以在本地html中进行测试。

有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的原型中，这将保证您的所有配置属性都是被动的。如文件中所述

当您将普通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从任何组件直接访问它。类似于

这个。$root.configServer

就这样

---

我希望这会有所帮助。

向Vue原型添加属性并不会使其变得被动。为了使其具有反应性，您需要执行类似于“是”的操作。您可以将配置放在主vue实例的数据中吗？在这种情况下，vue将确保它将不惜一切代价反应是的，这是可行的。我需要访问此文件。$root。请加上答案。