vue3 搭配pinia 使用时 持久化存储 sessionStore

在使用pinia时候我发现实现其持久化的存储有两个插件 pinia-persistedstate-plugin和pinia-plugin-persist

　　其中区别和使用如下

　　1.pinia-persistedstate-plugin （存储在localStorage）

import { createPinia } from 'pinia'

// 引入持久化插件

import { createPersistedState } from "pinia-persistedstate-plugin";

const store = createPinia()

// 使用该插件。这个存储的是localStorage 永久化的存储

 store.use(createPersistedState())

 

 

//mian.ts中直接引入使用

import store from './stores'

const app = createApp(App)

app.use(store)

 

　　2.pinia-plugin-persist　　（自定义存储位置 推荐）

 import { createPinia } from 'pinia'

 const store = createPinia()

 // 引入持久化插件

import piniaPluginpersistedstate from 'pinia-plugin-persist'
store.use(piniaPluginpersistedstate)

在store.ts 文件中使用

import { defineStore } from 'pinia'

import { nextTick } from 'vue'

export const useStore = defineStore({

　　...

　　persist:{

　　　　　　enabled:true,

　　　　　　strategies:[{

　　　　　　key:"store",//自定义存储名称

　　　　　　storage:sessionStorage,//自定义存储位置

　　　　}]

　　}

})

在我们需要保存会话级的存储内容时候，一定使用sessionStorage 存储，否则会出现问题，特别是在登录注册的内容保存用户登录后的信息。

当前用户已经登录，我们将存储信息存在本地的缓存中LocalStorage的时候我们再次通过邀请链接进入注册页面时候，我们会发现我们请求接口是用到的token还是存在的，这样我们在没有登录的情况下也有token是不对的，而使用sessionStorage用户只要离开这个会话重新进入一个链接页面时候session里面就是空的。当然我们在回到登录的时候最好清除token，否则如果用户直接通过链接进去登录页面，我们页面中有通过token来判断用户登录状态的时候会出现问题。