使用Pinia持久化插件-persist解决刷新浏览器后数据丢失的问题

一、现象

登录成功后，能正常看到文章分类的数据，但只要刷新浏览器就提示服务异常

二、原因

Pinia默认是内存存储，当刷新浏览器时，存储在里面的token丢失，导致请求后端API接口失败

三、解决：使用Pinia持久化插件-persist

安装persist

npm install pinia-persistedstate-plugin

pinia中使用persist插件

main.js

//导入持久化插件
import {createPersistedState} from'pinia-persistedstate-plugin'
const persist = createPersistedState()
//pinia使用持久化插件
pinia.use(persist)

在创建定义状态时配置持久化

stores/token.js

//参数持久化
{
    persist:true
}

四、参考资料

https://www.bilibili.com/video/BV14z4y1N7pg?spm_id_from=333.788.player.switch&vd_source=0467ab39cc5ec5940fee22a0e7797575&p=82