位置: 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)(爱丽丝小镇在哪)

  • 财务费用多好还是少好
  • 临时用工的会计分录
  • 小规模公司缴税以后公转私
  • 公允价值变动损益属于什么科目
  • 支票的填写前应检查有哪些内容
  • 发票抵扣联做进项税入账处理是怎样的?
  • 企业为什么要签订集体合同
  • 增值税抵扣凭证包括桥闸通行费发票
  • 申报截止日期前还能用吗
  • 个体户地税怎么收费
  • 单位报销托儿费
  • 财务杠杆系数简单计算方法
  • 公司购买电视
  • 申请增值税一般计税方法的个体工商户可自
  • 一般纳税人兼营不同税率的货物或应税劳务
  • 如何用python查数据
  • 老板拿的手机
  • 公司股权变更要换营业执照吗
  • win11 恢复
  • 委托代销商品税法规定
  • 税务登记后每个月交什么钱
  • 什么情形不属于经警告无效人民警察可以使用武器的情形
  • fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
  • PHP:file_put_contents()的用法_Filesystem函数
  • 耕地佔用税的缴纳期限
  • 福利补贴属于工资吗
  • 提供劳务收入如何核算
  • php开源微商城
  • php有多简单
  • 上季度的亏损可以弥补下季度的企业所得税
  • 既简单又安全的小实验
  • laravel运行
  • php无限分类实现不实用递归
  • 企业收到土地回收怎么办
  • 企业有外币账户怎样做账
  • 业务招待费可以结转以后年度扣除吗
  • 不动产物权归属和内容的根据是什么?
  • 长期股权投资的账面价值怎么计算
  • 帝国cms到底好不好
  • 税款已缴未入库怎么处理
  • 什么叫网银盾账户
  • 个体户核定征收开票额度是多少
  • 小规模首次申请发票张数
  • 三栏式明细账适用于原材料明细账
  • 接受银行承兑汇票需要开通吗
  • 施工企业会计核算实验报告
  • 计提折旧的固定资产全年平均总值怎么算
  • 简易征收的税款可以抵减
  • 劳务公司账务处理实操
  • 小规模如何缴纳税款
  • 以前年度损益调整结转到哪里
  • 一般纳税人适用3%税率情况
  • 仓库盘点后的数据怎么处理
  • 制造费用主要核算项目
  • 发放工资时社保为什么计入其他应付款科目
  • 品牌代理费计入什么科目
  • 销售收入指开票金额吗
  • 哪些福利费没有附加税
  • 建账有哪几种方法
  • win8 vmware
  • XP系统怎么删除密码
  • fedora i3wm
  • kvm虚拟机运行方式
  • mac 怎么复制文件
  • windows7桌面右击
  • win10系统下如何安装谷歌浏览器插件?win10系统下谷歌浏览器插件的安装方法图文教程
  • win10系统激活后怎么关闭
  • jquery插件大全
  • portainer集群管理
  • jquery弹出窗口的方法
  • node性能优化
  • IE下href 的 BUG问题
  • jquery滚动条滚动到指定位置
  • python 字典的字典
  • mac解析域名
  • 如何在电子税务局变更财务负责人
  • 电子税务局怎么添加银行账户信息
  • 地税税务登记代码怎么查
  • 广东省电子税务局app下载官网
  • 河北电子税务局怎么使用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设