vue3全局变量挂载

image.png

vue3是用globalProperties这个属性来挂载全局变量的。

挂载完后在文件中使用
template中直接调用

image.png

script中传统方法下使用跟以前一样

image.png

script中setup语法糖下使用，由于setup没有this，所以需要导入获取当前实例的方法，解构到proxy来使用

image.png

可以把proxy变量理解为原来的this

可以看到上面变量test引用爆红了，因为ts类型检测到proxy下没有test变量，要解决这个问题需要在写一个声明文件来扩展vue的接口

如果项目中没有现成的声明文件可以使用的话，可以自己创建一个，我在src下创建了一个叫typing.d.ts的声明文件

image.png

自己添加的声明文件，需要在tsconfig.json或jsconfig.json里配置一下，在include里把文件完整路径加上

image.png

这样声明文件才能生效，如果用的是项目里已经存在并且引入了的声明文件，可以忽略这一步

最后在声明文件里定义如下，类型设置为any是图方便，可以设置为自定义的interface

image.png

扩展全局变量的接口内容，需要扩展ComponentCustomProperties这个接口，不要乱改成别的

注意，扩展vue的接口需要先import vue进来

image.png

不导入原来的环境进来，直接扩展的话，就不是扩展了，变成覆盖，自己可以试试不import会怎么样

扩展完毕，不再报错

image.png