怎么在Vue3+Vite+pinia+ts中使用 Pinia持久化数据

最近开启了Vue3+ vite + Pinia的项目,发现官方仓库下面有个状态库Pinia,使用Pinia 过程中, 需要用到一些持久化的场景,比如token等数据,为了不直接被人获取到,想找个可以直接使用的带加密的Pinia持久化库, 搜了一下没有看到比较成熟的持久化库(vuex持久化库可以配合加密使用)

最后通过搜索 找到一个库,pinia-use-persist, 集成了加密和持久化的效果,记录一下使用过程:

这个库可以通过配置式开启 加密和存储的 Storage类型(比如loclStorage或者sessionStorage、cookie等)

使用效果非常好

  • 使用过程
npm i pinia-use-persist
// main.ts
import {createApp} from 'vue'
import App from './App.vue'
import {createPinia} from "pinia";
import {usePersist} from "pinia-use-persist";
import plugin from "./plugin";

const pinia = createPinia()
pinia.use(usePersist)

createApp(App).use(pinia).use(plugin).mount('#app')

创建store.ts

import {defineStore} from "
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值