关于vue全局变量的几种使用方法说明

这几种方法都是亲手实验过到底好不好用的,大家可以参考下:

1.写一个js文件,或者vue文件,把全局变量写到里面,然后挂载到Vue.prototype上面去,在main.js中引入包含全局变量的文件。

这种方法的致命问题:就是main.js是入口文件,第一次使用这个全局变量当然没有问题,但是当你刷新页面的时候,由于又重新创建了vue实例,之前为全局变量设置的值就会消失。网上似乎有监听它变化然后赋值到local或者session中然后再重新赋值回去的方式,我没试过,不予评价

2.写到session中

可以完美解决问题,而且标签页关闭,session就清除了,但是要注意用户可能回去更改session中的变量,注意不要随便放重要的关于权限的变量进去,可以防止session被更改的,具体参考我的另一篇博客(但是那种方法还是有的问题,所以不是很推荐)

3.用vuex

可以完美解决问题

但是网上总有人说vuex要中大型项目再去用,否则小题大作,可是它就是一个工具,一种解决办法,摆在那里为什么不去用呢,何必去在意项目的大小,本来写几句store的代码,代码量也不大啊。

以上。

Vue2中,可以使用以下几种方式来全局引入变量: 1. 使用Vue.prototype 可以使用Vue.prototype来定义全局属性或方法。具体操作见上一个回答。 2. 使用全局变量 可以在main.js中定义一个全局变量: ``` Vue.prototype.$globalVar = 'Hello, World!' ``` 然后在其他组件中直接使用: ``` console.log($globalVar) // 输出:Hello, World! ``` 这种方法虽然简单,但是不推荐使用,因为它可能会与其他全局变量发生冲突。 3. 使用全局对象 可以在main.js中定义一个全局对象: ``` Vue.prototype.$myGlobal = { var1: 'Hello', var2: 'World' } ``` 然后在其他组件中引用: ``` console.log(this.$myGlobal.var1) // 输出:Hello console.log(this.$myGlobal.var2) // 输出:World ``` 这种方法全局变量更好,因为它可以避免命名冲突。 4. 使用Vue插件 可以创建一个Vue插件来实现全局变量的引入。具体步骤如下: 首先,创建一个JavaScript文件,定义一个对象,该对象包含你想要全局引入的变量或函数。例如: ``` const myPlugin = { install(Vue) { Vue.prototype.$myVar = 'Hello, World!' } } export default myPlugin ``` 然后,在main.js中引入该插件: ``` import myPlugin from './path/to/myPlugin.js' Vue.use(myPlugin) ``` 最后,在其他组件中即可使用: ``` console.log(this.$myVar) // 输出:Hello, World! ``` 这种方法最为推荐,因为它可以清晰地组织代码,并且可以很方便地扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值