Vue全局共享数据之globalData,vuex,本地存储使用方法

news2024/11/24 16:47:42

目录

 一、globalData

 二、vuex存储方式 1.vue2用法,2.vue3用法

 三、本地存储

uniapp的数据缓存


写在最前面,把vue能用到的存储方法都整理拿出来,方便阅读以及工作用。🍉🍉🍉可以收藏起来即拿即用

 Vue全局共享数据之globalData,vuex,本地存储使用方法

 一、globalData

小程序有globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用。

🍉🍉🍉js中操作globalData的方式如下: getApp().globalData.text = 'test'

在应用onLaunch时,getApp对象还未获取,暂时可以使用this.globalData获取globalData。

如果需要把globalData的数据绑定到页面上,可在页面的onShow页面生命周期里进行变量重赋值。

nvue的weex编译模式中使用globalData的话,由于weex生命周期不支持onShow,但熟悉5+的话,可利用监听webview的addEventListener show事件实现onShow效果,或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式,而不是weex编译模式。

globalData是简单的全局变量,如果使用状态管理,请使用vuex(main.js中定义)

🍉🍉🍉具体可以看官网:uni-app官网

 在js中操作globalData的方式如下:

 获取方式:getApp().globalData.text='test'

 二、vuex存储方式 1.vue2用法,2.vue3用法

//store下的index.js存储vuex数据

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
});

export default new Vuex.Store({
  state: {
    count:20
  },
  plugins: [vuexLocal.plugin],
});



//vue3

state: {
   passwordState:false,//登录状态
},
mutations:{
    // 设置修改登录状态的方法
    setPasswordState(state,value){
        state.passwordState = value; 
     },
}



//VUE2中VueX用法

import {mapState } from "vuex";

export default {
  computed: {
      ...mapState({count:'count'}),//方法2
  },
  computed: mapState({
    count: 'count', //方法3
    count: (Store) => Store.count, // 方法4
    count: function (Store) { // 方法5
      return '123:' + Store.count
    },
  }),
  methods:{

      submit2(){
        console.log(this.$store.state.count,"===");//方法1
        console.log(this.count,"count")
      }

  },
}

//vue3中VueX用法

const storeState=mapState(['count','name'])
const state={}

Object.keys(storeState).forEach(Key=>{
	const fn=storeState[Key].bind({$store:store})
	state[Key]=computed(fn)
})


//返回...state就行了

//(2)使用computed一个一个解析

import {useStore} from 'vuex'
import {computed} from 'vue'

const store=useStore()
const state=computed(()=>store.state.name)
======================================================
import { onMounted } from 'vue'
import { useStore } from 'vuex'
export default {
   setup(){
     //把useStore赋值
     const $store = useStore();
     onMounted(()=>{
        //拿到vuex的值
        console.log($store.state.passwordState) // false
        //改变vuex的值
        $store.commit('setPasswordState',true) //调用vuex的方法
        //再次打印
        console.log($store.state.passwordState) // true
     })
     return{
     
     }
   }
}

 三、本地存储

    localStorage:可长期存储数据,除非用户清楚localStorage信息,否则数据会一直存在。同一中浏览器之间,不同页面,数据可以共享。

    sessionStorage:短期存储数据,用户关闭标签页后或直接关闭浏览器后数据会清空。同一浏览器不同页面之间,数据不可共享

存储用法:

    // 将this.pickerItem的数据存储入insuranceCode,需提前转化成string类型

    pickerItem:{
        id: that.item.id,
        limit: 100,
        page: 1,
    }
//长期存储
    localStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));
//短期存储
    sessionStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));

读取用法,如何获取到:

//长期存储
localStorage.getItem("insuranceCode")

//短期存储
sessionStorage.getItem("insuranceCode")

清除用法:

    // 清除insuranceCode

    localStorage.removeItem("insuranceCode");

    sessionStorage.removeItem("insuranceCode");

    // 清除所有

    localStorage.clear();

    sessionStorage.clear();

最后补充个uniapp的数据缓存。🍉🍉🍉

uniapp的数据缓存

 

 

这里就整个经常用的,其他的可以看下面的图片。 懒.... 

//uni.setStorageSync(KEY,DATA) 存储

try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}





//uni.getStorageSync(KEY)

//从本地缓存中同步获取指定 key 对应的内容。


try {
	const value = uni.getStorageSync('storage_key');
	if (value) {
		console.log(value);
	}
} catch (e) {
	// error
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/102382.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

杨旸:从边缘智能迈向泛在智能

内容来源:2022年11月12日,在全球边缘计算大会上海站上,我们非常荣幸邀请到了特斯联集团首席科学家杨旸博士来分享,杨旸博士曾任上海科技大学教授、科道书院院长、上海雾计算实验室主任;科技部“第五代移动通信系统&…

win10VS2017安装boost库

安装boost库参考:Windows下VS2017下boost库安装配置 https://blog.51cto.com/u_15179769/5633439 下载boost库 官方网站:https://www.boost.org/ 下载链接:https://www.boost.org/users/history/version_1_67_0.html 搜索vs开发人员命令…

JavaWeb框架(一):Web入门,Http的请求和响应,https介绍,Web实战自定义服务器

Servlet入门 MVC实战项目 仓储管理系统JavaWeb入门介绍Http协议Http请求数据格式Http响应数据格式Web实战Demo:自定义服务器对比Https协议总结Redis章节复习已经过去,新的章节JavaWeb开始了,这个章节中将会回顾JavaWeb实战项目 仓储管理 代码…

LC-417. 太平洋大西洋水流问题(多源BFS、DFS)

417. 太平洋大西洋水流问题 难度中等558 有一个 m n 的矩形岛屿,与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界,而 “大西洋” 处于大陆的右边界和下边界。 这个岛被分割成一个由若干方形单元格组成的网格。给定一个 m x n 的整数…

[附源码]计算机毕业设计Python的文成考研培训管理系统(程序+源码+LW文档)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等…

详细复习云开发~小程序【云存储、列表的下拉刷新、列表的分页加载】

文章目录一,云开发~云存储1-1,云开发控制台管理文件1-2,上传图片到云存储1-3,给商品列表加商品图片1-4,上传视频到云存储1-5,上传word,excel文件到云存储1-5-1,上传之前先选择文件1-…

我国数据库现状与未来发展趋势

作者:IT圈黎俊杰 一、数据库现状 (一)国际数据库市场现状 在看国内数据库市场现状前,先看一组国际市场数据库的应用情况。 以2021年4月份数据国际市场数据库热度排名为例,稳居前三的Oracle、MySQL 和 Microsoft SQL …

朗坤环境递交注册:拟募资11亿 陈建湘家族色彩浓厚

雷递网 雷建平 12月19日深圳市朗坤环境集团股份有限公司(简称:“朗坤环境”)日前更新招股书,并提交注册,准备在深交所创业板上市。朗坤环境计划募资11.22亿元,其中,6.57亿元用于中山市南部组团垃…

目标检测论文解读复现【NO.22】多尺度下遥感小目标多头注意力检测

前言 此前出了目标改进算法专栏,但是对于应用于什么场景,需要什么改进方法对应与自己的应用场景有效果,并且多少改进点能发什么水平的文章,为解决大家的困惑,此系列文章旨在给大家解读最新目标检测算法论文&#xff0…

JavaWeb框架(四):JavaWeb项目基于三大组件实现的公司管理系统

MVC实战项目 Web 三大组件实现 公司管理系统需求:项目实战基于会话跟踪技术实现登录功能基于Filter过滤器实现登录验证功能基于Listener监听器监听ServletCntext对象的创建和销毁会话跟踪技术cookiesession对比Filter过滤器入门入门DemoFilter执行流程Filter拦截路径…

基于SSM+Maven+Shiro+Layui+Websocket在线论坛交流聊天bbs系统设计

开发软件:Idea Mysql Redis 开发技术: SSM Maven Shiro Websocket Bootstrap Layui 前台部分 1.用户注册登录模块 用户登录后,可以进行发帖回帖功能,在线签到功能,完善个人信息,添加好友,收藏贴子,评论帖子,点赞功能,记录功能(比如记录今天发生的…

(附源码)ssm巢湖学院校园报修系统 毕业设计 021813

SSM巢湖学院校园报修系统 摘 要 随着互联网大趋势的到来,社会的方方面面,各行各业都在考虑利用互联网作为媒介将自己的信息更及时有效地推广出去,而其中最好的方式就是建立网络管理系统,并对其进行信息管理。由于现在网络的发达&…

行业认可|墨菲安全登信息通信软件供应链安全社区优秀榜单

11月以来信息通信软件供应链安全社区开展了“软件供应链优秀成果案例”征集评审活动,在 12 月 16 日的结果公示中,墨菲安全软件供应链安全管理平台本次成功入选自主研发创新成果。这是对墨菲安全长期专注在软件供应链安全领域的成果认可,我们…

堆叠自动编码器(Stacked AutoEncoder)

Deeplearning Algorithms tutorial 谷歌的人工智能位于全球前列,在图像识别、语音识别、无人驾驶等技术上都已经落地。而百度实质意义上扛起了国内的人工智能的大旗,覆盖无人驾驶、智能助手、图像识别等许多层面。苹果业已开始全面拥抱机器学习&#xf…

Python解题 - CSDN周赛第16期 - 流水还是积水?

问哥在最后30分钟才有空进入比赛,发现满分选手只有两位,就知道大家又遇到坑了。。。其中两道题的数据都多少有点问题。不得不佩服那两位在这种情况下还能拿满分的选手,等到他们分享解题报告后,问哥再来更新代码吧。 第一题&#x…

java Lambda概念 通过实现线程简单体验一下Lambda表达式

首先 我们先对函数式编程 做一个简单的描述 在数学中 函数是 有输入量和输出量的一套计算方案 也就对应程序中的 拿数据 做操作 java 是一个面向对象编程的语言 他强调的做什么都要通过对象完成 而在函数式中就要尽可能摆脱这种思维模式 函数式只在乎做什么 并不强调用什么形…

程序员能纯靠技术渡过中年危机吗?

首先说答案,能!程序员可以靠技术渡过中年危机,但是要转变线性思维。 先说说个人情况,80后,从事电机控制软件开发十余年,属于制造业,算嵌入式的一个小分支,相关的细分行业包括电动汽…

元学习和机器学习的对比

目录引言机器学习元学习什么是元学习元学习的流程学习学习函数评价学习函数好坏迭代优化整体框架元学习和机器学习的对比定义的区别数据集划分的区别损失函数的区别两者之间的共通之处总结引言 本篇博客是李宏毅老师元学习课程的笔记。 深度学习大部分时间在调参数。在业界通…

71. SAP ABAP 报表屏幕输入字段如何实现联动效果

有朋友向我咨询,SAP ABAP 报表输入字段,如何实现联动效果? 所谓联动效果,如下图所示,我们有三个输入框,类型都是 Checkbox: 激活缓存使用共享内存使用二级缓存默认情况下,使用共享内存和使用二级缓存这两个 Checkbox 处于禁用状态。只有当我们选中 激活缓存 时,这两个…

【lssvm回归预测】基于灰狼算法优化最小支持向量机GWO-LSSVM数据预测模型含Matlab源码

✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。 🍎个人主页:Matlab科研工作室 🍊个人信条:格物致知。 更多Matlab仿真内容点击👇 智能优化算法 …