javascript - 如何使用 Vue 对全局变量使用react？

Question

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

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

稍后 WebView 注入(inject):

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 中进行测试。

Answer 1

除了将配置放入 Vue 的原型(prototype)中，您实际上可以将其作为数据选项添加到主 vue 实例中，这将保证您所有的配置属性都是响应式(Reactive)的。如文档中所述

When you pass a plain JavaScript object to a Vue instance as its data option, Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty.

话虽如此，每当您更新配置属性时，vue 都会对其使用react。

现在让我们看看如何用代码实现:

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。

好吧，就是这样。

希望对你有帮助。