使用uni-app开发，需要了解全局变量实现的几种方式

Posted 2021-05-24 苛学加

全局变量

我们在开发应用中，全局变量是非常重要的一环。
比如记录当前用户token，配置接口请求服务地址等全局使用的变量。
在uni-app中，有多种方式现全局变量，下面将一个一个整理分析。

一、 Storage 本地存储

本地存储及已文件的形式保持在本地，需要的时候通过访问本地文件获取内容，是一种持久化的保持方式。
这种方式比较适合原生APP应用。

如果不是保存参数，是保存文件的化，可以另外单独了解uni.saveFile()相关方法。

1. 使用案例

我们需要做一个全国的行政区划选择功能，要求需要支持动态更新，整体数据组成的对象有300kb大小。
此时就可以动态图本地存储方式，将数据保存到本地，必要的时候进行版本判断，如有新版本及重新提取并保存。

2. 使用方式

因为文件的读取速度受文件大小的影响，因此有同步和异步之分。

• 同步

  uni.setStorageSync('key', 'value');// 同步存储 ，进程等待存储完成在往下执行
  
  let value = uni.getStorageSync('key');// 同步获取 ，进程等待读取完成在往下执行
  

• 异步

  // 异步存储
  uni.setStorage({
      key: 'key',
      data: 'value',
      success: function () {
          // 存储成功的回调
      }
  });
  
  // 异步获取
  uni.getStorage({
      key: 'key',
      success: function (res) {
          // 获取成功的回调
      }
  });
  

3. 优缺点分析

• 存储稳定，应用重启设备重启内容都还在，并且支持更新操作。
• 频繁进行存和取，有较大性能消耗，故高频读取的数据不应该使用此方法存储。
• 在不同端有不同的实现方式和限制。

4. 注意事项

因为涉及到文件读写，Storage在不同端的实现方式不同，功能限制也不同。

• H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
• App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
• 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
• 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
• 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
• 百度、字节跳动小程序文档未说明大小限制
• 非App平台清空Storage会导致uni.getSystemInfo获取到的deviceId改变

除此之外，其他数据存储方案：

H5端还支持websql、indexedDB、sessionStorage
App端还支持SQLite、IO文件等本地存储方案。

二、.js/.json 配置文件

及将一些打包后不太可能会出现变化的内容直接写在js或json的配置文件中，在需要使用这些内容是通过全局或单个页面引入方式进行获取的方式。

1. 使用案例

应用的接口请求的域名，在开发阶段是一个地址，正式上线后又是一个地址。
通过配置文件的方式就能很轻松的进行控制。

2. 使用方式

下面已.json文件的实现方式进行举例。

• 创建配置文件app.config.json

  {
  	"name":"应用名称",
  	"baseUrl":"https://www.xxx.com",
  }
  

• 在main.js全局引用配置文件

  import config from 'common/app.config.json' //引入应用基础方法
  Vue.prototype.$config = config //vue全局注册
  

• vue页面中使用

  this.$config.baseUrl; //即可获取服务地址
  

3. 优缺点分析

• 没有大多的性能消耗，人在塔在，只要应用没卸载或文件损坏都能正常访问。
• 如果需要对配置文件进行更新不大好操作，故一般用于打包后就不会变动的参数。

三、globalData

小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。
是一种使用非常简便的全局变量实现方式。

1. 使用案例

暂无，因为作者暂时未在实际项目中使用过此方法。

2. 使用方式

• 在App.vue 中定义globalData的相关配置

  <script>  
      export default {  
          globalData: {  
              text: 'text'  
          }
      }  
  </script>
  

• js中操作globalData

  getApp().globalData.text = 'test';
  

3. 优缺点分析

• 使用简单，全端通用。
• 无法自动更新，要同步比较麻烦。

入门简单，要用更高需求的时候使用又挺麻烦。

4. 注意事项

• 在应用onLaunch时，getApp对象还未获取，暂时可以使用this.$scope.globalData获取globalData。
• 如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。
• nvue的weex编译模式中使用globalData的话，由于weex生命周期不支持onShow，但熟悉5+的话，可利用监听webview的addEventListener show事件实现onShow效果，或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式，而是weex编译模式。

四、Vuex 状态管理模式

uni-app 内置了 Vuex 。Vuex的关键之处在于它是动态响应的。
比如应用中多个页面需要显示或使用当前用户单位，你在任意一处对单位进行了修改，其他页面也会自动同步过去。

1. 使用案例

非登录状态的预览功能，当用户感兴趣后再选择登录操作，顺畅无感的从无用户过度到有用户。
还有些应用中需要切换店铺/行政区划等，那么当前的店铺或行政区划信息就很适合使用vuex来管理。

2. 使用方式

关于Vuex的使用我单独整理了一篇文章，干兴趣的请移步至：
在uni-app项目中使用VUE的好基友VUEX - 点击跳转

3. 优缺点分析

• 属于 vue 生态一环, 能够触发响应式的渲染页面更新。
• 页面重新加载时vuex中的state会重新变为初始状态，需单独处理。

并不是有最好的全局状态实现方式，而是结合事件功能选择适合的方式。