利用uniapp怎么实现一个全局变量

  介绍

本篇文章给大家分享的是有关利用uniapp怎么实现一个全局变量,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

全局变量的实现方式

一般来说在uniapp中有以下几种方式

<李>

本地存储

<李>

配置文件

<李>

挂载到Vue。李原型

<李>

globalData

<李>

vuex

下面对这5种方式的实现进行介绍

本地存储

永久存储,以应用为例即使该应用被关闭,该数据依然会被存储

这是一种永久的存储方式,类似于web的本地存储(有关于饼干,令牌,SessionStorage, LocalStorage,会整理在另一篇文章中),当我们需要永久存储用户的某一信息时会使用这种方法,但是需要注意使用这种方式需要避免对存储数据的频繁获取和修改操作,因为会对性能产生一定的影响,应用声明周期内的变量,不应该使用此种方式

这种存储方式有同步和异步两种

同步存储

,,//同步存储   uni.setStorageSync才能(“key",“value")//才能同步获取   let 才能;value =, uni.getStorageSync (“key"),,   console.log才能(“我会等到上边执行完毕后才会执行)

异步存储

,, uni.setStorage ({   ,,关键:“key",   ,,,数据:“value",   ,,,成功:函数(){   ,,,,,//存储成功的回调   ,,,,,console.log(“我是异步存储的回调,我会在val声明后被执行“)   ,,,}   })才能   let 才能;val =, 1//这行会先执行   ,,   uni.getStorage({才能   ,,关键:“key",   ,,,成功:函数(res) {   ,,,,,//存储成功的回调   ,,,,,console.log(“我是异步获取的回调,我会在val2声明后被执行“)   ,,,}   })才能   let 才能;val2 =, 2//这行会先执行

配置文件

这是一种利用模块化文件导出实现的方式,先将变量写在js文件中,然后通过出口默认的形式导出使用

一般来说使用这种方式实现的全局变量,是需要在应用被用户安装之前到用户卸载时都必须使用的变量,如向后端请求的域名,其他的情况不太适用这种方式,同时这种方式也有弊端,就是每次使用都需要引入文件

配置。js

,,//如在config.js中,我们导出了一个基础域名   export 默认{才能   ,,baseUrl:“http://www.test.com"   以前,,}

索引。js

,,//通过进口引入这个文件   import  config 才能得到“. ./共同/config.js"   export 才能;default  {   ,,,onLoad () {   ,,,,console.log (config.baseUrl)//baseUrl:“http://www.test.com"   ,,,}   ,,}

挂载到Vue。原型

这是一种利用原型的实现方式(有关于js的原型链和继承,会在整理在另一篇文章中),但是这种方式在微信小程序上会有特殊表现

注意:在微信小程序中模板无法直接读取展示引入的全局变量
主要。js

,,//这里的config.js参照上文已经写好的文件   import  config 才能得到“。/共同/config.js"//将baseUrl才能挂载到Vue上,此后在页面和组件中就可以通过this.baseUrl的方式去访问   Vue.prototype.baseUrl 才能=配置。baseUrl

页面中

& lt; template>   ,& lt; !——,微信小程序中值为未定义,其他端有效,——比;   ,& lt; view>   ,值为:{{this.baseUrl}}   ,& lt;/view>   & lt;/template>      & lt; script>   ,export  default  {   ,onLoad () {   ,,,console.log (this.baseUrl)//癶ttp://www.test.com"   ,}   ,}   & lt;/script>

globalData

这种方式是微信小程序特有的,小程序无法使用vuex因此出现了globalData, uniapp是小程序另一种实现因此也出现了globalData

使用globalData有以下几点需要注意的地方:

<李>

globalData不是响应式的,一个文件中对globalData的修改,不会动态的在另一个文件中响应

<李>

如果想实现globalData的“响应“,你需要在昂秀的生命周期中手动获取值

对第二点进行解释,为什么需要在昂秀里去获取值onLoad不行么?

因为如果A, B页面都引入了globalData, B在页面内部修改了globalData的值返回一页面,此一页时面没有被销毁不会调用onLoad生命钩子,只会执行昂秀此时在onLoad里去获取globalData,那么是不会执行的,也就无法做到响应式

利用uniapp怎么实现一个全局变量