如何使用Vue对全局变量作出反应？

Question

我有一个移动Web视图，其中注入了一些全局配置对象：

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
    }
  },
};

但是，该页面未更新。如何应对变化？

PD：我确认使用Safari调试工具更新了对象。还要在本地html中测试。

Answer 1

您实际上可以将配置作为数据选项添加到主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。

就是这样。

希望对您有所帮助。