踩了很多坑啊,总算给我摸索出来了🥹🥹🥹
提醒一下本博客建立在pinia
库已经安装的前提下,仅叙述在此基础上的持久化
- 下载插件
看清楚了看清楚了,别下成第一个了⭐
❌pinia-plugin-persist
✔️pinia-plugin-persistedstate
下载正确的插件
npm install pinia-plugin-persistedstate
- 导入插件
修改
main.ts
文件,下面给出我的代码,小友照着加上即可
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 导入插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
// 创建pinia,别创建多个了,看清楚昂
const pinia = createPinia()
// 使用pinia插件,插件是加在pinia实例上的而不是app,注意注意
pinia.use(piniaPluginPersistedstate)
app.use(pinia)//这步不能忘哇
app.use(router)
app.use(ElementPlus)
app.mount('#app')
- 在
stores
使用时进行配置
注意看括号级数,别放错了位置
直接
persist:true
会使用默认名、默认本地存储、默认存储所有可存储的数据
{
persist:{
key:"videoData",//可以指定存储的key(即存入的名字)
storage:sessionStorage,//可以指定存储的存储方式:1. sessionStorage(会话储存,临时) 2. localStorage(本地储存,永久)
paths:["videoUrlList"]//可以指定需要存储的内容(计算属性别存啊,存了也无效的)
}
}