位置: IT常识 - 正文

在Vue 3中使用useStorage轻松实现localStorage功能(vue中的use)

编辑:rootadmin
在Vue 3中使用useStorage轻松实现localStorage功能 在Vue 3中使用useStorage轻松实现localStorage功能VueUse 介绍

推荐整理分享在Vue 3中使用useStorage轻松实现localStorage功能(vue中的use),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3.0使用,vue3.0用法,vue.use作用,vue3 usehook,vue.use用法,vue中的use,vue3 vue.use,vue3 vue.use,内容如对您有帮助,希望把文章链接给更多的朋友!

VueUse文档:Get Started | VueUse

VueUse是基于Vue3的Composition API的实用函数的集合,useStorage是其中的一个函数。我们可以使用useStorage来实现我们的localStorage功能。

安装

npm i @vueuse/core

使用CDN

<script src="https://unpkg.com/@vueuse/shared"></script><script src="https://unpkg.com/@vueuse/core"></script>useStorage()的用法在Vue 3中使用useStorage轻松实现localStorage功能(vue中的use)

useStorage()将要用于引用的键名作为第一个参数传递,将要保存的值作为第二个参数传递。

值的保存、获取、删除

localStorage设置setItem()来保存值,用getItem()来获取值,用removeItem来删除值如下:

<script setup > import {ref} from "vue"; const counter = ref('消息') //保存值 localStorage.setItem('counter',counter.value) //获取值 const data = localStorage.getItem('counter') console.log('data',data) //删除值 localStorage.removeItem('counter')</script>

而useStorage()只需要一个就可以进行值的保存和获取,如下,用法:

const storedValue = useStorage('key', value)

例子:

const msg = ref('你好') //保存值 useStorage('msg',msg.value) //获取值 const msgData = useStorage('msg') console.log('msgData',msgData.value) //删除 const clear = () => { msg.value = null }

useStorage()自定义序列化

默认情况下,useStorage将根据提供的默认值的数据类型智能地使用相应的序列化程序。例如,JSON.stringify/JSON.parse将用于对象,Number.toString/parseFloat用于数字等。 如下:

import { useStorage } from '@vueuse/core'useStorage( 'key', {}, undefined, { serializer: { read: (v: any) => v ? JSON.parse(v) : null, write: (v: any) => JSON.stringify(v), }, },)

以上代码,我们设置对象的名称为key,初始值为空对象{},如果存储中没有key的值,则返回null。在写入时,将对象序列化为JSON字符串。

本文链接地址:https://www.jiuchutong.com/zhishi/295867.html 转载请保留说明!

上一篇:dom-to-image(dom-to-image原理)

下一篇:爱丽丝镇附近水域中的柠檬鲨宝宝,巴哈马比米尼岛 (© Ken Kiefer 2/Getty Images)(爱丽丝小镇在哪)

  • switch手柄可以连电脑吗(switch手柄可以连蓝牙吗)

    switch手柄可以连电脑吗(switch手柄可以连蓝牙吗)

  • 微信撤回的图片还能恢复吗(微信撤回的图片怎么找出来)

    微信撤回的图片还能恢复吗(微信撤回的图片怎么找出来)

  • 如何设置无线路由器(如何设置无线路由器信号穿墙模式)

    如何设置无线路由器(如何设置无线路由器信号穿墙模式)

  • 8p麦克风声音小是通病吗(8plus麦克风声音小)

    8p麦克风声音小是通病吗(8plus麦克风声音小)

  • 在sql语言中primary key的作用是(在SQL语言中删除一个表的命令是)

    在sql语言中primary key的作用是(在SQL语言中删除一个表的命令是)

  • 小米wifi管理密码忘了怎么办(小米WIFI管理密码在哪里)

    小米wifi管理密码忘了怎么办(小米WIFI管理密码在哪里)

  • 华为手表黑屏处理方法(华为手表 黑屏)

    华为手表黑屏处理方法(华为手表 黑屏)

  • 局域网的通信硬件设备主要包括(局域网的通信硬件设备)

    局域网的通信硬件设备主要包括(局域网的通信硬件设备)

  • pr歌词字幕只能一句句加吗(pr字幕怎么跟歌词一样变色)

    pr歌词字幕只能一句句加吗(pr字幕怎么跟歌词一样变色)

  • 无效的sim卡什么意思(无效的sim卡如何解决)

    无效的sim卡什么意思(无效的sim卡如何解决)

  • 哔哩哔哩怎么升级lv1(哔哩哔哩怎么升级lv2)

    哔哩哔哩怎么升级lv1(哔哩哔哩怎么升级lv2)

  • 如何删除自己发的抖音(如何删除自己发的弹幕)

    如何删除自己发的抖音(如何删除自己发的弹幕)

  • 蓝牙只能配对一个吗(蓝牙设备只能和一台设备配对)

    蓝牙只能配对一个吗(蓝牙设备只能和一台设备配对)

  • 哪款ipad能插电话卡(ipad支持充电)

    哪款ipad能插电话卡(ipad支持充电)

  • 电脑的电源线通用吗(电脑上的电源线)

    电脑的电源线通用吗(电脑上的电源线)

  • ipadair能插内存卡吗(ipadair能装内存卡吗)

    ipadair能插内存卡吗(ipadair能装内存卡吗)

  • 怎么更改ipad序列号(ipad更改序列号是什么意思)

    怎么更改ipad序列号(ipad更改序列号是什么意思)

  • 拼多多店铺可以改名字吗(拼多多店铺可以更换身份证吗)

    拼多多店铺可以改名字吗(拼多多店铺可以更换身份证吗)

  • 淘宝店铺会员怎么会员领取(淘宝店铺会员怎么批量取消)

    淘宝店铺会员怎么会员领取(淘宝店铺会员怎么批量取消)

  • 华为matex折叠屏怎么打开

    华为matex折叠屏怎么打开

  • iphone11怎么更新系统(iphone11怎么更新ios16)

    iphone11怎么更新系统(iphone11怎么更新ios16)

  • 如何取消小米微信震动(小米微信扣费怎么关闭)

    如何取消小米微信震动(小米微信扣费怎么关闭)

  • 应用宝禁止安装怎么设置(应用宝禁止安装如何解除)

    应用宝禁止安装怎么设置(应用宝禁止安装如何解除)

  • mate20pro无线充电怎么打开(mate20Pro无线充电位置)

    mate20pro无线充电怎么打开(mate20Pro无线充电位置)

  • 一加7pro支持5g么(一加7pro支不支持5g)

    一加7pro支持5g么(一加7pro支不支持5g)

  • 子公司把利润给母公司怎么做账
  • 住宿普通发票怎么做账
  • 增值税额的计算公式写销售额除以1.13*0.13对吗
  • 对方开给我的专票遗失了,让我上传发票
  • 个税汇算清缴为啥要补交
  • 增值税发票四舍五入
  • 全额工资是到手工资吗
  • 公司租车要交什么费用
  • 哪些单位和个人可构成全宗
  • 如何去办理小型微利企业资格每年都需要认证吗?
  • 个人所得税中的股息红利应纳税额
  • 怎么红冲暂估成本
  • 商品过期可以向商家索要赔偿吗
  • 公司购买电脑费用怎么报销
  • 财务发票已开但钱未到位怎么处理?
  • 税务局退税收入多久到账
  • 小微企业季度缴税一百万退税吗
  • 小微企业附加税优惠政策2023
  • 公司预付的货款怎么做账
  • 费用报销审批单填写样本图片
  • 空调安装费开票属于什么类
  • 增值税清卡失败f50006
  • 图书对方开具的证明
  • 个体工商户开税票怎么开
  • 电脑网页游戏打不开了怎么办
  • 建设工程招标办
  • Kamikōchi, Nagano Prefecture, Japan (© sadao/Shutterstock)
  • 酒店开业前准备工作流程
  • 国外进口增值税税率
  • 买房增值税征收标准
  • 持续集成的步骤
  • AI:DeepSpeed Chat(一款帮用户训练自己模型的工具且简单/低成本/快 RLHF 训练类ChatGPT高质量大模型)的简介、安装、使用方法之详细攻略
  • 销售多余材料的收入属于收入吗
  • 办公室装修款怎么做账
  • 民办非企业开办资金入什么科目
  • 帝国cms移动端设置教程
  • 不具备独立核算条件的行政单位
  • 领取定额备用金的会计分录
  • 企业付给个人工资怎么算
  • 社保所属期怎么填
  • 同一控制下企业合并发生的审计费用计入
  • 在计算应纳税所得额时,纳税人因自然灾害
  • 以权益结算的股份
  • mysql日期和时间类型
  • 劳务外包会计分录最新
  • 金蝶结转销售成本
  • 固定制造费用需要逐项进行预计通常与本期产量无关
  • 以前年度损益调整会计分录
  • 出售抵债资产账务处理
  • 机关单位工会经费提取比例
  • 已认证进项税转出口退税怎么处理
  • 什么叫做对公转账
  • 购买电脑配件组件怎么选
  • 小规模纳税人购进税控机的税如何抵扣
  • 银行承兑汇票收款业务流程
  • 客户火车票可以抵扣进项税吗
  • mysql的外键
  • win7系统如何隐藏桌面
  • win7电脑初始化
  • 光盘做镜像文件
  • 在microsoft store
  • mac怎么移动鼠标
  • GHOST XP 安装教程
  • win7系统浏览器不见了
  • linux中管道
  • linux使用vi编辑文件
  • win7开始菜单中的应用程序图标隐藏了
  • node.js报错
  • python网络编程视频教程
  • 利用python做一个文字小游戏
  • shell脚本中调用外部c程序
  • android基础知识入门
  • android:ViewPager与FragmentPagerAdapter
  • 哈尔滨工业大学录取分数线2023年
  • 洛阳契税首套房认定标准
  • 国家税务局网上电子税务局官网天津
  • 本市可以跨县高考报名吗
  • 企业筹建期间发生的费用应计入什么账户
  • 北京市地税局领导
  • 总公司和子公司是什么关系
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设