解决方案

uni-app 全局变量的几种实现方式

作者:仙宝云 | 发布时间:2021-06-11 13:33:08 | 阅读:743

公用模块

界说一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入

留意这种方法只支撑大都个vue页面或大都个nvue页面之间公用,vue和nvue之间不公用

示例如下:

在 uni-app 项目根目录下创立 common 目次,然后在 common 目次下新建 helper.js 用于界说公用的办法


接下来在 pages/index/index.vue 中援用该模块

这种方法保护起来比较便利,但是弱点就是每次都需要引入

挂载 Vue.prototype

将一些使用频率较高的常量或者方式,直接扩大到 Vue.prototype 上,每个 Vue 对象都市“继承”下来

留神这种方法只撑持vue页面

示例如下:

在 main.js 中挂载属性/方式

然后在 pages/index/index.vue 中调用

这种方法,只需要在 main.js 中界说好即可在每个页面中直接调用

Tips

  • 每个页面中不要在出现重复的属性或方式名
  • 提议在 Vue.prototype 上挂载的属性或办法,可以加一个统一的前缀比如 $url、global_url 这样,在阅读代码常常也容易与当前页面的内容区分起头

globalData

小程序中有个globalData概念,可以在 App 上声明全局变量 Vue 之前是没有这类概念的,但 uni-app 引入了globalData概念,并且在包罗H5、App等平台都实现了。
在 App.vue 可以界说 globalData ,也可以利用 API 读写这个值

globalData支撑vue和nvue共享数据

globalData是一种比较简略的全局变量使用方法

界说:App.vue

js中操作globalData的方法如下:

赋值:getApp().globalData.text = ‘test’

取值:console.log(getApp().globalData.text) // ‘test’

如果需要把globalData的数据绑定到页面上,但是在页面的onshow声明周期里进行变量重赋值HBuilderX 2.0.3起,nvue页面在uni-app编译模式下,也撑持onshow

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式它采取集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种但是预测的方法产生变化

HBuilderX 2.2.5+起,撑持vue和nvue之间共享参考

这里以登录后同步更新用户信息为例,简略说明下 Vuex 的用法,更多更详细的 Vuex 的内容,提议前去其官网 Vuex 学习下

举例说明:

在 uni-app 项目根目录下新建 store 目次,在 store 目次下创立 index.js 界说状态值

然后,需要在 main.js 挂载 Vuex

末了,在 pages/index/index.vue 应用

 

详细示例,恳求下载附件,在 HBuilderX 中运转。

智慧商业服务商仙宝云欢迎您!

请加微信: 18962171986 (宋经理)

在线咨询