开发笔记:如何用Vue对全局变量做出反应？

篇首语：本文由编程笔记#小编为大家整理，主要介绍了如何用Vue对全局变量做出反应？相关的知识，希望对你有一定的参考价值。

您可以将其作为数据选项添加到主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
}
},


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

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

我希望它有所帮助。