Vue中定义全局变量与常量的各种方式详解

　　

　　

本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习、下面话不多说了,来一起看看详细的介绍:

　　

我想要定义一个变量,在项目的任何地方都可以访问的到,不需要每一次使用的时候,都引入。

　　


　　

　　

创建全球。js并且在其中定义

　　 　　 　　让=10; 　　 　　

在入口文件中引入global.js

　　 　　 　　进口的。/global.js ' 　　 　　

在项目中使用:

　　 　　//报错 　　 　　

发现报错了,并没有定义。为什么& # 63;

　　

<强>这个涉及到模块作用域:
　　

　　

1每一个js都相当于一个模块,一个模块有自己的模块作用域。
　　

　　

意思就是说:其中的变量方法,都只在这个模块上面生效。

　　


　　

　　

将变量放到Vue。原型上面,通过插件全局引入
　　

　　

创建全球。js,这样写:

　　 　　 　　让=10; 　　出口默认{ 　　安装(){ 　　Vue.prototype。$=一个; 　　｝ 　　} 　　 　　

在入口文件中引入:

　　 　　 　　从“进口G。/全球的 　　Vue.use (G); 　　 　　

在项目中使用:

　　 　　 　　美元。之前 　　 　　

的确可以,但是这样的方式并不好,在任何这个不指向Vue的地方,你都没有办法使用这个变量。

　　


　　

　　

将变量放到窗口对象上面
　　

　　

创建global.js 　　 　　 　　窗口。=10; 　　 　　

在入口文件中引入

　　 　　 　　进口的。/global.js ' 　　 　　

在项目中使用:

　　 　　 　　之前 　　 　　

可行,这种方式只要你能访问到窗口对象,就能访问到这个变量。
　　

　　

有什么缺点吗& # 63;
　　

　　

暂时没有发现。

　　

实际的场景分析:
　　

　　

在实际情景上,你可能拥有一份配置,比如说微信公众号开发的时候,你有一份配置,写着
　　

　　

appId和appKey,希望可以全局访问到。
　　

　　

<强>按照上面的讨论,你应该这么写:

　　

global.js 　　 　　 　　窗口。appId=123; 　　窗口。 appKey=' abc '; 　　 　　

可以很明显的看的到,一旦你要定义的变量或者常量过的多,就能疯了。
　　

　　

所以我们希望有一种方式,我们定义还是按照自己的方式定义:

　　 　　 　　appId=123; 　　 appKey=' abc '; 　　 　　

然后有一个方法fn,可以将这两个参数,直接绑定到窗口对象上面

　　 　　 　　fn (appId appKey); 　　 　　

结果就是appId, appKey都会被绑定到窗口对象上面。

　　


　　

　　

你需要传递一个对象给方法fn, fn负责将这个对象中的每一个键都绑定到窗口对象上面。

　　 　　 　　让bindToGlobal=obj=比;{ 　　(让关键在obj) { 　　窗口(例子)=obj(例子) 　　｝ 　　} 　　 　　

<强>更新版本:
　　

　　

你这样用之后,所有的变量/常量都绑定在窗口对象上面,很容易就和已经存在窗口对象上面的变量冲突,所以要收敛你的行为,这样:你先在窗口对象上面设置一个属性,属性值是一个对象,比如这样:

　　 　　 　　窗口。键={}; 　　 　　

然后将你所有需要设置的全局变量,方法,都放到窗口。关键里面而不是窗口上面。

　　 　　 　　让bindToGlobal=obj=比;{ 　　窗口。美国广播公司(abc)={}; 　　(让关键在obj) { 　　窗口。abc(例子)=obj(例子) 　　｝ 　　} 　　 　　

更近一步,可以让这个关键的名字为_const或者_var,或者让用户自己控制这个变量的名字。

　　 　　 　　让bindToGlobal=(obj,键=皏ar”)=比;{ 　　窗口(例子)={}; 　　(让我在obj) { 　　窗口(例子)[我]=obj[我] 　　｝ 　　} 　　 　　

现在大致已经可以了,然后你要解决一下,如果重复调用“bindToGlobal”后面的会覆盖掉前面所定义的变量/常量,而我们要的是追加,不是覆盖,所以代码做个调整:

　　 　　

Vue中定义全局变量与常量的各种方式详解