位置: IT常识 - 正文

Vue3 + Pinia 持久化存储

编辑:rootadmin
Vue3 + Pinia 持久化存储 文章目录1 前言2 持久化存储2.1 安装依赖2.2 新增 store 文件2.3 修改 main.ts 文件2.4 持久化存储测试3 高级配置3.1 存储所有变量3.2 存储部分变量1 前言本文使用 Pinia 及插件 pinia-plugin-persist 做持久化存储,避免修改 store 后还需要手动修改 storage本文弃用插件 pinia-plugin-persistedstate,该插件无法配置一个 store 中的变量分别存储于 localStorage 和 sessionStorage2 持久化存储2.1 安装依赖pnpm i pinia // 安装 piniapnpm i pinia-plugin-persist // 安装持久化存储插件2.2 新增 store 文件新增 store 文件夹store 文件夹下新增 index.ts 文件import type { App } from 'vue'import { createPinia } from 'pinia'import piniaPluginPersist from 'pinia-plugin-persist'const store = createPinia()store.use(piniaPluginPersist)export function setupStore(app: App<Element>) { app.use(store)}export { store }2.3 修改 main.ts 文件import { createApp } from 'vue'import App from './App.vue'import { setupStore } from './store'import router from './router/routes'const app = createApp(App)setupStore(app)app.use(router).mount('#app')2.4 持久化存储测试store 文件夹下新增 modules 文件夹modules 文件夹下新增 user.ts 文件import { defineStore } from 'pinia'const userStore = defineStore('user', { state: () => { return { accessToken: '', userName: '' } }, actions: { SET_ACCESS_TOKEN(token: string) { this.accessToken = token }, SET_USER_NAME(name: string) { this.userName = name } }, persist: { enabled: true, }})export default userStore

推荐整理分享Vue3 + Pinia 持久化存储,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

若不生效,需检查全局是否注册多个 Pinia (全局搜索createPinia)

比如 main.ts 文件重新注册了 Pinia

import { createApp } from 'vue'import App from './App.vue'import { createPinia } from 'pinia'import router from './router/routes'const pinia = createPinia()const app = createApp(App)app.use(pinia)app.use(router).mount('#app')3 高级配置3.1 存储所有变量Vue3 + Pinia 持久化存储

默认存储到 sessionStorage ,key 为 store 的 id

persist: { enabled: true}

存储到 localStorage ,key 为 store 的 id

persist: { enabled: true, strategies: [ { storage: localStorage, }, ]}

自定义存储 key 值

persist: { enabled: true, strategies: [ { key: 'piniaStore', storage: localStorage, }, ]}3.2 存储部分变量

默认存储到 sessionStorage

persist: { enabled: true, strategies: [ { paths: ['accessToken'] }, ]}

自定义存储到 localStorage

persist: { enabled: true, strategies: [ { storage: localStorage, paths: ['accessToken'] }, ]}

自定义存储到 sessionStorage 和 localStorage

persist: { enabled: true, strategies: [ { storage: sessionStorage, paths: ['userName'] }, { storage: localStorage, paths: ['accessToken'] } ]}
本文链接地址:https://www.jiuchutong.com/zhishi/295941.html 转载请保留说明!

上一篇:iframe框架一个页面中嵌套到另外一个页面(如何进行iframe框架切换)

下一篇:通过云服务器租用GPU进行基于YOLOV5的人体检测模型训练(通过云服务器租号安全吗)

  • 苹果13怎么开微信视频美颜(苹果13怎么开微信分身功能)

    苹果13怎么开微信视频美颜(苹果13怎么开微信分身功能)

  • 支付宝积分兑换在哪里

    支付宝积分兑换在哪里

  • 如何升级icloud储存空间(怎样升级icloud储存空间)

    如何升级icloud储存空间(怎样升级icloud储存空间)

  • 华为手环第一次充电(华为手环第一次使用前是不是需要充电)

    华为手环第一次充电(华为手环第一次使用前是不是需要充电)

  • 苹果se电池能用多长时间(苹果se电池能换多大的)

    苹果se电池能用多长时间(苹果se电池能换多大的)

  • mate30锁屏时间怎么调位置

    mate30锁屏时间怎么调位置

  • 存储权限是干什么用的(存储权限什么意思)

    存储权限是干什么用的(存储权限什么意思)

  • usp接口是什么意思(usp插口线路图)

    usp接口是什么意思(usp插口线路图)

  • s6有nfc功能吗(s6支不支持nfc)

    s6有nfc功能吗(s6支不支持nfc)

  • 手机电灯开关在哪里(手机电灯开关在哪里乎机电筒)

    手机电灯开关在哪里(手机电灯开关在哪里乎机电筒)

  • 微信朋友删除了能恢复吗(微信朋友删除了对方还能看到吗)

    微信朋友删除了能恢复吗(微信朋友删除了对方还能看到吗)

  • 看公众号会有浏览记录吗(浏览了公众号文章,对方知道吗)

    看公众号会有浏览记录吗(浏览了公众号文章,对方知道吗)

  • iphonex是双卡双待吗(iphonex是双卡双待吗怎么装两个卡)

    iphonex是双卡双待吗(iphonex是双卡双待吗怎么装两个卡)

  • 手机网盘怎么下载文件(手机网盘怎么下载bt种子文件)

    手机网盘怎么下载文件(手机网盘怎么下载bt种子文件)

  • 手机上qq怎么看特别关心(手机上qq怎么看共同好友的名字)

    手机上qq怎么看特别关心(手机上qq怎么看共同好友的名字)

  • 黑鲨2屏幕分辨率多少(黑鲨2pro屏幕分辨率)

    黑鲨2屏幕分辨率多少(黑鲨2pro屏幕分辨率)

  • 手机应用怎么安装到sd卡(手机应用怎么安装到u盘)

    手机应用怎么安装到sd卡(手机应用怎么安装到u盘)

  • 荣耀v20可以刷门禁卡吗(荣耀v20可以刷门禁系统吗)

    荣耀v20可以刷门禁卡吗(荣耀v20可以刷门禁系统吗)

  • 三星s6能接不能打电话(三星s6无法连接wifi)

    三星s6能接不能打电话(三星s6无法连接wifi)

  • 拼多多商品短标题是什么意思(拼多多商品短标题怎么写)

    拼多多商品短标题是什么意思(拼多多商品短标题怎么写)

  • 小米手机的屏幕分辨率怎么调(小米手机的屏幕使用时间在哪里)

    小米手机的屏幕分辨率怎么调(小米手机的屏幕使用时间在哪里)

  • airpods充电线通用吗(airpods充电线插不到底)

    airpods充电线通用吗(airpods充电线插不到底)

  • 微信好友来源朋友验证消息(微信 好友来源)

    微信好友来源朋友验证消息(微信 好友来源)

  • Mac上如何切换Apple ID和iCloud账号?(mac上如何切换apple id)

    Mac上如何切换Apple ID和iCloud账号?(mac上如何切换apple id)

  • 没有发票先入账怎么办
  • 专项工程支出计入什么科目
  • 申请退税到账后怎么处理
  • 失控发票补税可以抵扣吗
  • 成品油跨月发票红字冲销步骤
  • 债权转增资本应缴纳什么税
  • 事业单位如何计提工资
  • 被列为经营异常名录有什么影响
  • 对公账户进账是否缴税
  • 工伤费用的伤残补助金属于福利费吗
  • 2018年业务宣传费与广告费税前扣除标准及依据
  • 税务局拍卖资产
  • 企业所得税预缴纳税申报表
  • 应税行为扣除额期初余额
  • 现金折扣应不应计入成本
  • 资金与费用
  • 企业股权平价转让涉及哪些税费
  • 公司技术服务部是干嘛的
  • 无偿划转房产能否入递延收益
  • 利润表里的营业成本包括哪些
  • 怎么设置静音iphone
  • 企业不得抵扣进项税的情形
  • win11开机黑屏进不去桌面
  • win11预览版怎么变回正式版
  • 电脑自带网速测试
  • 冲红发票的会计处理办法
  • 公司租用员工的车租车协议
  • linux进程操作命令
  • 购入黄金产品怎么入账
  • 怎么增加c盘空间容量
  • PHP:ereg_replace()的用法_Regex正则函数
  • 企业注销时无力缴纳社保
  • PHP:imagepsfreefont()的用法_GD库图像处理函数
  • php vld
  • 成本法转为权益法例题
  • 老年人经常便秘怎么办
  • javascript基础语法
  • php 微信公众号
  • nginx for linux
  • input输入改变边框颜色
  • 傅里叶变换的过程
  • 兼职人员的劳务费标准
  • 帝国cms使用手册
  • 增值税普通发票可以抵扣吗
  • 季度做账是什么意思
  • 零星开支是什么会计科目
  • php中定义常量的函数是什么
  • 最好用的刷题笔
  • 买固定资产没有发票
  • 出售固定资产不能作为企业的收入
  • 家庭保洁服务包括什么
  • 横幅属于是什么税收大类?
  • 企业为职工支付的补充医疗保险费
  • 小规模纳税人购买税控设备
  • 无偿调入的固定资产其贷方应计入
  • 研发产品相关专业
  • 营业外支出会计编码
  • 月末如何计提增值税附加及增值税
  • 冲上月暂估入账的 会计分录
  • 坏账准备的会计分录例题
  • 代扣代缴个人所得税分录
  • mysql保留整数
  • mysql二进制安装教程
  • win2003和2003r2
  • gwservice进程
  • vmstat命令
  • console打开
  • linux文件系统inode
  • freelibrary 程序崩溃
  • 怎么用python画图具体步骤
  • Fast TileMap
  • css中背景图片设置
  • unity3d android
  • javascript面向对象编程指南 pdf
  • python写监控脚本
  • 什么是增值税免抵税额
  • 湖北省电子税务局操作指南
  • 税控盘操作指南
  • 年度关联业务往来报告
  • 残疾人的房产可以买卖吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设