vue3+vite+ts+pinia实现持久化存储

踩了很多坑啊，总算给我摸索出来了🥹🥹🥹

提醒一下本博客建立在pinia库已经安装的前提下，仅叙述在此基础上的持久化

1. 下载插件

看清楚了看清楚了，别下成第一个了⭐
❌ pinia-plugin-persist
✔️pinia-plugin-persistedstate

下载正确的插件

npm install pinia-plugin-persistedstate

2. 导入插件

修改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')

3. 在stores使用时进行配置

注意看括号级数，别放错了位置

直接persist:true会使用默认名、默认本地存储、默认存储所有可存储的数据

 {
    persist:{
      key:"videoData",//可以指定存储的key（即存入的名字）
      storage:sessionStorage,//可以指定存储的存储方式:1. sessionStorage(会话储存，临时) 2. localStorage（本地储存，永久）
      paths:["videoUrlList"]//可以指定需要存储的内容(计算属性别存啊，存了也无效的)
    }
  }