详解uniapp的全局变量实现方式

前言

本文整理了一些uniapp全局变量的实现方式,细节知识来自于uView官网中对uniapp中的全局变量实现,感兴趣的同学可以前往uView官网搜索vuex进行查看

全局变量的实现方式

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

  • 本地存储
  • 配置文件
  • 挂载到 Vue.prototype
  • globalData
  • vuex

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

本地存储

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

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

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

同步存储

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

异步存储

  uni.setStorage({
   key:"key",
    data:"value",
    success:function(){
      //存储成功的回调
      console.log("我是异步存储的回调,我会在val声明后被执行")
    }
  })
  let val = 1//这行会先执行

  uni.getStorage({
   key:"key",
    success:function(res){
      //存储成功的回调
      console.log("我是异步获取的回调,我会在val2声明后被执行")
    }
  })
  let val2 = 2//这行会先执行

配置文件

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

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

config.js

  //如在config.js中 我们导出了一个基础域名
  export default{
   baseUrl:"http://www.test.com"
  }

index.js

  //通过import引入这个文件
  import config from "../common/config.js"
  export default {
    onLoad(){
     console.log(config.baseUrl)//baseUrl:"http://www.test.com"
    }
  }

挂载到Vue.prototype

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

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

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

页面中

<template>
 <!-- 微信小程序中值为undefined,其他端有效 -->
 <view>
 值为:{{this.baseUrl}}
 </view>
</template>

<script>
 export default {
 onLoad() {
    console.log(this.baseUrl)//"http://www.test.com"
 }
 }
</script>

globalData

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

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

  • globalData不是响应式的,一个文件中对globalData的修改,不会动态的在另一个文件中响应
  • 如果想实现globalData的"响应",你需要在onShow的生命周期中手动获取值

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

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

App.vue

  export default{
   //需要在App.vue中去定义globalData
   globalData:{
     userName:"白居易"
    },
    //这里需要注意,如果想要在App.vue中使用globalData,不能直接使用getApp().globalData.Name,因为此时getApp()未有生成
    // 1. 非V3模式,可以通过this.$scope.globalData获取
   // 2. V3模式,可以通过getApp({allowDefault: true}).globalData获取
    onLaunch(){
     console.log(this.$scope.globalData.userName)
    }
  }

当在App.vue中定义好globalData后我们就可以在页面中使用了
A.vue

<template>
 <view>
 <view>
  <!-- 注意,不能在模板中直接使用 getApp().globalData.userName -->
  <<卖炭翁>>的作者是:{{author}}
 </view>
 <view>
  <u-button @click="modifyUserName">修改userName值</u-button>
 </view>
 </view>
</template>

<script>
 export default {
 data() {
  return {
  author: ''
  }
 },
 onShow() {
  // 每次A.vue出现在屏幕上时,都会触发onShow,从而更新author值
  this.author = getApp().globalData.userName;
 },
 methods: {
  modifyUserName() {
                //此时修改了globalData的值
  getApp().globalData.userName = "诗圣";
  // 修改userName后,本页的author依然不会自动刷新,因为globalData不是响应式的
  // 我们仍然需要手动刷新本页的author值,由此可见globalData的弊端
  this.author = getApp().globalData.userName;
  }
 }
 }
</script>

Vuex的实现方式

强烈建议使用vuex的方式,在uniapp使用vuex有两种方式,一种是基于传统vue的方式,一种是uView封装后的方式,下面介绍uView官网对vuexd的封装

传统实现方式

传统vuex的使用方式,这里只做简单介绍,如果对vuex不了解的同学,可以去vue官网查看官方文档

在uni.app的根目录下创建一个store文件,并在其中创建一个index.js文件 内容如下

//index.js
  import Vue from "vue"
  import Vuex from "vuex"
  Vue.use(Vuex)
  const store = new Vuex.Store({
   state:{
     vuex_token:"123456"
    },
    //同步修改 state 中值的方法
    mutations:{
     //payload使用户在使用mutations是传入的参数,可以使单一值也可以是对象
     modifyToken(state,payload){
       state.vuex_token = payload.token
      }
    }
  })
  export default store

在main.js中引入

import store from '@/store';

// 将store放入Vue对象创建中
const app = new Vue({
 store,
 ...App
})

在页面中使用

<template>
 <view>
 <view>
  Token值为{{vuex_token}}
 </view>
 <u-button @click="btnClick">修改vuex_token</u-button>
 </view>
</template>

<script>
//这是Vue官方为了更方便使用store提供的api,详情可以去Vue官方查看文档
import {mapState, mapMutations} from 'vuex';
export default {
 computed: {
 ...mapState(['vuex_token'])
 },
 methods: {
 ...mapMutations(['modifyToken']),
 btnClick() {
  // 这里第二个参数可以普通变量或者对象,自定义的,根据mutations需求处理(不使用mapMutations的方式)
  this.$store.commit('modifyToken', {token: 'xxxyyyzzz'}
            //使用mapMutations的方式
            this.modifyToken({token: 'xxxyyyzzz'})
 }
 }
}
</script>

uView的vuex实现方式(重点)

首说为什么uView对vuex进行了封装,原因有以下两点

  • uView觉得需要在vuex中定义state和mutations,在每个需要用到vuex的地方都需要引入mapState进行解构,然后再次使用(操作繁琐)
  • 因为vuex是将变量保存在内存中的,刷新浏览器就会导致vuex变量消失,一般还需要配合其他的存储方式进行使用如LocalStorage

针对这些问题uView官方提供了自己封装使用vuex的一套方法,这个方法结合LocalStorage、vuex,使得用户不必再去繁琐的调用vuex和考虑刷新丢失的问题,下面我将代码展示,并将其思路和过过程解释

  • 先在根目录下创建一个index.js文件,写入以下内容,开头我会先提供大致思路具体含义之后会在注释中解释

思路:index.js的大致思路如下

a. 为了解决vuex刷新丢失无法永久存储数据的问题,创建了一个lifeData对象,这个对象会通过函数,将其存储在LocalStorage中,以达到永久保存的效果,此时我只需要将vuex中需要永久保存的数据,以key、value的形式存储在这个对象中就可以了

b. 为了解决每次使用vuex都需要使用mutations中的函数去操作对应的stroe中的变量,封装了$uStore这一个方法去操作所有的store中的变量,当然只进行了简单的复制操作,对于更拓展的功能,用户可以自己在mutations中去封装函数进行拓展

c. 封装一个saveStateKeys数组,这个数组的数据会在app启动时就会被取出,因此我们可以把一些需要app启动时就获取的数据放在其中,如应用中上次用户已经登陆的信息,实际上saveStateKeys和lifeData是配合使用的,只有存在saveStateKeys中的变量,才会在存储时被存储在lifeData中以达到永久的存储,其他的就和普通vuex存储方式一样,对于这点我们可以在下述代码中看到

//引入Vuex、vue 使用Vuex,这一步和一般使用vuex没有区别
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//创建一个变量,这个变量用于存储需要永久存储的数据
let lifeData = {};

try{
  // 尝试获取本地是否存在lifeData变量,第一次启动APP时是不存在的
  lifeData = uni.getStorageSync('lifeData');
}catch(e){

}

// 需要永久存储,且下次APP启动需要取出的,在state中的变量名
let saveStateKeys = ['vuex_user', 'vuex_token'];

// 保存变量到本地存储中(达到刷新/重启(app不存在刷新,app只会重启)不丢失)
const saveLifeData = function(key, value){
 // 判断变量名是否在需要存储的数组中
  //这一条就是在判断如果变量名存储在saveStateKeys中,那么就将其存储在lifeData中达到永久存储,否则就和一般vuex的存储方式一样
 if(saveStateKeys.indexOf(key) != -1) {
 // 获取本地存储的lifeData对象,将变量添加到对象中
 let tmp = uni.getStorageSync('lifeData');
 // 第一次打开APP,不存在lifeData变量,故放一个{}空对象
 tmp = tmp ? tmp : {};
 tmp[key] = value;
 // 执行这一步后,所有需要存储的变量,都挂载在本地的lifeData对象中
 uni.setStorageSync('lifeData', tmp);
 }
}
const store = new Vuex.Store({
 // 下面这些值仅为示例,使用过程中请删除
 state: {
 // 如果上面从本地获取的lifeData对象下有对应的属性,就赋值给state中对应的变量
 // 加上vuex_前缀,是防止变量名冲突,也让人一目了然
 // 被永久存储的数据会从lifeData中去获取,因为lifeData已经存储在了本地中
 vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '明月'},
 vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
 // 如果vuex_version无需保存到本地永久存储,无需lifeData.vuex_version方式
 vuex_version: '1.0.1',
 },
 mutations: {
 $uStore(state, payload) {
            //payload就是后来调用的this.$u.vuex时传入的对象
            //如this.$u.vuex("user.info.score","jack") payload = {name:"user.info.score",value:"jack"}
  // 判断是否多层级调用,state中为对象存在的情况,诸如user.info.score = 1
  let nameArr = payload.name.split('.');//[user,info,score]
  let saveKey = '';
  let len = nameArr.length;
  if(nameArr.length >= 2) {
  let obj = state[nameArr[0]];
  for(let i = 1; i < len - 1; i ++) {
   obj = obj[nameArr[i]];// 此时obj就是user.info,当然此时他还是一个空数据
  }
                //nameArr[len-1]就是score,obj[nameArr[len - 1]]相当于 user.info.score
  obj[nameArr[len - 1]] = payload.value;
  saveKey = nameArr[0];
  } else {
  // 单层级变量,在state就是一个普通变量的情况
  state[payload.name] = payload.value;
  saveKey = payload.name;
  }
  // 保存变量到本地,见顶部函数定义
  saveLifeData(saveKey, state[saveKey])
 }
 }
})
export default store

在同目录下创建 mixin.js文件

思路:
a. 为了能够在每个页面都能通过this.的方式使用变量,我们需要将mapState通过Vue mixin的方式进行全局混入
b. 为了能够在每个页面都能轻松的调用vuex中的mutations里的方法,我们需要一个方法能够帮我们去调用uStore,而不是每次都通过commit的方式,因此uView还混入了另一个方法$u.vuex

ps: minxi(混入)是Vue提供的一种实现全局功能的一个api,混入有多种方式这里使用了全局混入,如果对于混入不是很了解可以去Vue官网查看相关文档

//mixin.js
import { mapState } from 'vuex'
import store from "@/store"

// 尝试将用户在根目录中的store/index.js的vuex的state变量,全部加载到全局变量中
let $uStoreKey = [];
try{
 $uStoreKey = store.state ? Object.keys(store.state) : [];
}catch(e){

}

module.exports = {
 created() {
 // 将vuex方法挂到this.$u上
 // 使用方法为:如果要修改vuex的state中的user.name变量为"史诗" => this.$u.vuex('user.name', '史诗')
 // 如果要修改vuex的state的version变量为1.0.1 => this.$u.vuex('version', '1.0.1')
 this.$u.vuex = (name, value) => {
  this.$store.commit('$uStore', {
  name,value //这里有没有回忆起来$uStore传入的payload haha
  })
 }
 },
 computed: {
 // 将vuex的state中的所有变量,解构到全局混入的mixin中
 ...mapState($uStoreKey)
 }
}

开始全局混入,在main.js中引入 mixin.js文件进行混入

//main.js
let vuexStore = require("@/store/$u.mixin.js");
Vue.mixin(vuexStore);

将store放到Vue实例中

//main.js
import store from '@/store';

// 将store放入Vue对象创建中
const app = new Vue({
 store,
 ...App
})

以上就是uView官方对vuex的封装,在app开发中使用这种封装后的vuex很便捷,同时自身也可以根据需要在@/stote/index.js中去拓展自己的方法

结语

以上就是uniapp全局变量的不同实现方式,具体使用哪一种需要在实际开发中根据实际选择,个人感觉uView对vuex的封装,对于初入前端我而言有着很高参考价值,因此特别整理出来留存分享。

到此这篇关于详解uniapp的全局变量实现方式的文章就介绍到这了,更多相关uniapp 全局变量内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序自定义tabBar在uni-app的适配详解

    引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供

  • uni-app 组件里面获取元素宽高的实现

    遇到的问题:直接在组件的mounted里面创建选择器,获取元素的宽高,即使扔到定时器里面执行,还是偶尔会有获取不到的情况 解决办法: // 写法一: getDescBox() { uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect(result => { if (result) { console.log('==========',result) }else { this.getDescBox();

  • uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • 使用 UniApp 实现小程序的微信登录功能

    1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息 获取成功,则说明已经授权过了,直接登录成功 获取失败,则说明没有授权过,需要授权之后才能进行登录 用户点击页面

  • uni-app实现点赞评论功能

    模拟朋友圈实时点赞及评论功能 点赞思路:点击的时候,使用push(点赞)以及slice(取消赞)方法处理数组,并且调用点赞接口 评论思路:点击的时候,写多一个评论列表,当点击发送的时候commentStatus=true,且索引等于点击的索引.同时调用获取评论列表的接口 html <view class="toolbar"> <view class="timestamp">{{item.timetype}}</view> <

  • uni-app之APP和小程序微信授权方法

    uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 适用平台:Android.iOS.微信小程序.实现了一套代码,同时发布到Android.iOS.微信小程序. 参考官方:https://uniapp.dcloud.io/ APP微信授权 检测服务商 检测手机上是否安装微信.QQ.新浪微博等. uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.prov

  • uni-app如何页面传参数的几种方法总结

    uni.$emit(eventName,OBJECT) 触发全局的自定事件.附加参数都会传给监听器回调. 其中eventName为事件名,OBJECT为触发事件附加参数 示例代码如下: uni.$emit('update',{msg:'页面更新'}) uni.$on(eventName,callback) 监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数. eventName为事件名,callback为事件的回调函数. 示例代码如下: uni.$on('updat

  • 使用uni-app开发微信小程序的实现

    前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文 uni-app 介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台. 即使不

  • uni-app 支持多端第三方地图定位的方法

    简介 该方法支持跳转第三方地图并定位指定坐标. APP端跳转至百度地图(第三方软件):若无,则跳转至高德地图(第三方软件):若均无,则打开腾讯地图(uni自带方法:uni.openLocation) 其它端打开腾讯地图(uni自带方法:uni.openLocation) demo 源码:https://github.com/yapeee/uni-components 测试数据: wgs84: 39.9078008469, 116.391290596 bd09: 39.915547, 116.40

  • 详解uniapp的全局变量实现方式

    前言 本文整理了一些uniapp全局变量的实现方式,细节知识来自于uView官网中对uniapp中的全局变量实现,感兴趣的同学可以前往uView官网搜索vuex进行查看 全局变量的实现方式 一般来说在uniapp中有以下几种方式 本地存储 配置文件 挂载到 Vue.prototype globalData vuex 下面对这5种方式的实现进行介绍 本地存储 永久存储,以app为例即使该应用被关闭,该数据依然会被存储 这是一种永久的存储方式,类似于web的Local Storage(有关于Cook

  • 实例详解Android文件存储数据方式

    总体的来讲,数据存储方式有三种:一个是文件,一个是数据库,另一个则是网络.下面通过本文给大家介绍Android文件存储数据方式. 1.文件存储数据使用了Java中的IO操作来进行文件的保存和读取,只不过Android在Context类中封装好了输入流和输出流的获取方法. 创建的存储文件保存在/data/data/<package name>/files文件夹下. 2.操作. 保存文件内容:通过Context.openFileOutput获取输出流,参数分别为文件名和存储模式. 读取文件内容:通

  • 详解Jvm中时区设置方式

    这篇文章memo一下Jvm中关于时区设定的基础操作. Java的时区设定 这里列出如下三种方式 方式 说明 TimeZone.setDefault方式 通过java的utils下的TimeZone进行动态设定 user.timezone传递方式 运行时通过传递-Duser.timezone=xxx进行设定 TZ环境变量方式 通过export的TZ环境变量进行设定 TimeZone.setDefault方式 Sample代码如下: sh-4.2# cat TestTimeZone.java imp

  • 详解Angular数据绑定及其实现方式

    前言 Web开发需要模型和视图之间的数据同步.这些模型基本上包含数据值,而视图则处理用户看到的内容.因此,如果您想知道这在Angular中是如何发生的,这篇有关Angular数据绑定的文章将为您提供帮助. 下面提到的是此处讨论的主题: What is Data Binding? Types of Data Binding in Angular One-way Data Binding Interpolation Property Binding Event Binding Two-way Dat

  • 详解uniapp无痛刷新token方法

    前端在请求接口时,和后端定义好了,如果状态码为 401 ,则表明 token 过期,需要前端请求新的 token 大概流程如下: 1.用户登录之后,后端会返回两个 token ,分别为accessToken 和refreshToken 存储到Storage 平时请求数据时,请求头使用accessToken 来发送接口 2.当返回401 token 过期后, 我们通过接口向后端获取新的 token ,请求参数为refreshToken 3.我们拿到新的accessToken 和refreshTok

  • 详解Vue项目的打包方式(生成dist文件)

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static

  • 详解Selenium中元素定位方式

    目录 八大元素定位方式 通过元素 id 定位 通过元素 name 定位 通过元素 class name 定位 通过 link text 与 partial link text 定位 通过 css selector 选择器定位 通过 Xpath 定位 通过 tag_name 定位 测试对象的定位和操作是我们利用 selenium 编写自动化脚本和 webdriver 的核心内容,其中 “操作” 这一部分又是建立在 “selenium” 元素定位的基础之上的.所以对元素对象的定位就显得越发的重要,接

  • 详解Spring Bean的配置方式与实例化

    目录 一. Spring Bean 配置方式 配置文件开发 注解开发 二.Spring Bean实例化 环境准备 构造方法实例化Bean 静态工厂实例化Bean 实例工厂实例化Bean FactoryBean 一. Spring Bean 配置方式 由 Spring IoC 容器管理的对象称为 Bean,Bean 配置方式有两种:配置文件开发和注解开发 配置文件开发 Spring 配置文件支持两种格式:xml和properties,此教程以xml配置文件讲解. XML 配置文件的根元素是 <be

  • 详解uniapp页面跳转URL传参大坑

    案例 展示电影详情,传递电影的id.从search.vue传递到movie.vue methods: { showMovie(e){ var trailerid = e.currentTarget.dataset.trailerid; // console.log(trailerid); uni.navigateTo({ url: '../movie/movie?trailerId='+trailerid, success: res => {}, fail: () => {}, complet

  • 详解mybatis三种分页方式

    目录 前言 一.Limit分页 二.RowBounds分页(不推荐使用) 三.Mybatis_PageHelper分页插件 总结: 前言 分页是我们在开发中绕不过去的一个坎!当你的数据量大了的时候,一次性将所有数据查出来不现实,所以我们一般都是分页查询的,减轻服务端的压力,提升了速度和效率!也减轻了前端渲染的压力! 注意:由于 java 允许的最大整数为 2147483647,所以 limit 能使用的最大整数也是 2147483647,一次性取出大量数据可能引起内存溢出,所以在大数据查询场合慎

随机推荐