Pinia持久化插件的使用

在平时开发中，我使用的pinia持久化插件是pinia-plugin-persistedstate，通过这个插件，我可以很方便的把一些数据存储到localStorage或sessionStorage中，这样在页面刷新的之后，数据也不会丢失。

官网地址：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

下面来看一下如何使用这个插件吧 ~

安装

npm i pinia-plugin-persistedstate

配置插件

平时我都会把创建pinia实例代码放到src/stores/pinia.ts中，所以我会在这个文件中配置插件。

• pinia.ts：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
// 注册持久化插件
pinia.use(piniaPluginPersistedstate)

export default pinia

• main.ts：

import App from './App.vue'
import pinia from './stores/pinia'

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

使用姿势

创建一个用户的Store，用来存放当前登录用户的信息，比如用户的基本信息，token等。

src/stores/UserStore.ts：

import { defineStore } from 'pinia'

type UserInfo = {
  id: string
  username: string
  // other info
}

export const useLoginUserStore = defineStore('useLoginUserStore', {
  state: () => {
    return {
      userInfo: {} as UserInfo,
      token: null as string | null
    }
  },

  actions: {
    setLoginUser(user: UserInfo, token: string) {
      this.userInfo = user
      this.token = token
    }
  },

  // 具体用法请自行查看官网
  persist: {
    key: '__app_login_user',
    // 如果不加paths字段, 默认会存储state中所有的数据, 如果加了paths字段, 必须手动配置要持久化的字段
    paths: ['userInfo', 'token'],
    // 默认使用localStorage存储, 可选值还有sessionStorage    
    storage: localStorage
  }
})