当前位置: 首页 > article >正文

quickapp_快应用_全局数据

全局数据

        • [1]本地数据存储
        • [2] 数据缓存
          • 问题

有时在接口请求的某个数据需要在多个页面使用,此时有2个方法

  • [1] 将数据存储在本地—> 等价于浏览器的localStorage
  • [2] 将数据存储在数据缓存中 -> 等价于vue中的vuex
[1]本地数据存储
  • 官方文档:官方文档
<template>
  <div class="wrapper">
    <text id='text' @click='setValue'>存储数据</text>
    <text id='text' @click='getValue'>获取数据</text>
  </div>
</template>

<script>
import storage from '@system.storage'
import prompt from '@system.prompt'
export default {
  setValue(){
    storage.set({
      key: 'test',
      value: '11111',
      success: function(data) {
        prompt.showToast({
          message: '存储成功'
        })
      },
      fail: function(data, code) {
        console.log(`handling fail, code = ${code}`)
      }
    })
  },
  getValue(){
    storage.get({
      key: 'test',
      success: function(data) {
        prompt.showToast({
          message: data
        })
      },
      fail: function(data, code) {
        console.log(`handling fail, code = ${code}`)
      }
    })
  }
}
</script>
[2] 数据缓存

将大部分页面都需要使用的数据存储在app.ux中,比如存储数据dataCache

data:{
 dataCache:{}
}
// (引用类型)一定要在onCreate初始化,在data中设置的默认值不起作用(默认undefiend)
onCreate(){
  this.dataCache = {}
},

使用app.ux中声明方法去获取、修改、删除

//获取 app 缓存的数据
getAppCache (key) {
 return this.dataCache ? (this.dataCache[key] || '') : ''
},
// 设置 app 缓存的数据
setAppCache (key, val) {
 if (val === '' && this.dataCache[key]) {
   delete this.dataCache[key]
   return
 }
 this.dataCache[key] = val
},
clearAppCache () {
 this.dataCache = {}
}

在app.ux中声明的方法默认会被添加在$app身上,可以通过this.$app.方法名或者this. $app._def.方法名去获取

this.$app.setAppCache('type', 1111)
this.$app.getAppCache('type') // 1111
问题
// app.ux
data:{
  dataCache:{
    type: 0
  }
}
//获取 app 缓存的数据
getAppCache (key) {
  console.log(111111, this.dataCache) // 111111 undefiend
  return this.dataCache ? (this.dataCache[key] || '') : ''
},
// 设置 app 缓存的数据
setAppCache (key, val) {
  if (val === '' && this.dataCache[key]) {
    delete this.dataCache[key]
    return
  }
  this.dataCache[key] = val
},
clearAppCache () {
  this.dataCache = {}
}
// 其他页面
console.log(this.$app.getAppCache('type')) // ‘’

疑问🤔️: 在data中定义的初始值不起作用?!!!

在onCreate生命周期中再将数据初始化一边

onCreate(){
  this.dataCache = {}
},

此时再次调用this.$app.getAppCache(‘type’),此时可以正常获取了。
总结在data中数据的初始化不起作用,默认都是undefined!!!


http://www.kler.cn/a/146803.html

相关文章:

  • Leetcode 3355 Zero Array Transformation
  • 【Vue笔记】基于vue3 + element-plus + el-dialog封装一个自定义的dialog弹出窗口组件
  • 鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
  • 第23次CCF计算机软件能力认证
  • web——upload-labs——第十关——.空格.绕过
  • 计算机网络-MSTP基础实验一(单域多实例)
  • Open Feign 源码解析(四) --- 请求对象构造(上)
  • 【Qt】判断QList链表内是否有重复数据
  • 微服务系列(三)--通过spring cloud zuul过滤器实现线上流量复制
  • 系统架构设计:8 论软件架构风格
  • mycat快速搭建
  • 微信小程序开发学习——小程序基本架构
  • 【设计模式-2.1】创建型——单例模式
  • HTML CSS登录网页设计
  • torch.nn.batchnorm1d,torch.nn.batchnorm2d,torch.nn.LayerNorm解释:
  • 数据结构总复习
  • React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
  • scala 实现表达式解析
  • 在UE中使用C++时的Pascal命名法
  • 【服务器能干什么】二十分钟搭建一个属于自己的 RSS 服务
  • LeeCode前端算法基础100题(4)- 无重复字符的最长子串
  • 青少年CTF之PHP特性练习(1-5)
  • FlinkSql-Temporal Joins-Lookup Join
  • 基于官方YOLOv4-u5【yolov5风格实现】开发构建目标检测模型超详细实战教程【以自建缺陷检测数据集为例】
  • 力扣hot100 滑动窗口最大值 单调队列
  • C/C++ 常用加密与解密算法