如何通过pinia-plugin-persistedstate实现数据持久化？

一、什么时候用pinia-plugin-persistedstate？

pinia和vuex一样都是状态管理工具，毫无疑问无论是pinia还是vuex，数据持久化都可以通过localStorage.setItem()方法实现（当然还有其他数据持久化的方法，就不在此一一列举了），但如果需要保存整个store中的数据，则只需要利用pinia-plugin-persistedstate进行简单配置即可全部搞定

二、具体使用步骤

（1）安装插件：

pnpm、npm、yarn任选自己常用的一种下包方式即可

pnpm i pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

yarn add pinia-plugin-persistedstate

（2）将插件挂在到pinia实例上

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

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate )

（3）在store中进行配置：将persist设置为true

1、组合式api写法：

{    persist: true    }

import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { User } from '@/types/user'

export const useStoreUser = defineStore(
  'use',
  () => {
    const user = ref()
    return { user }
  },
  {
    persist: true
  }
)

在localStorage中可以查看保存的数据 

2、选项式api写法：

persist: true

import { defineStore } from 'pinia'

export const useStoreUser = defineStore('use', {
  state: () => {
    return {
      user: '用户信息'
    }
  },
  persist: true
})

三、相关配置

1、pinia-plugin-persistedstate插件默认是存在localStorage中，如果需要存在sessionStorage中，需要添加以下配置：

export const useStoreUser = defineStore('use', {
  state: () => {
    return {
      user: '用户信息'
    }
  },
  persist: {
    storage: sessionStorage
  }
})

2、默认存储的key是store的名称，但key也可以自定义：

export const useStoreUser = defineStore('use', {
  state: () => {
    return {
      user: '用户信息'
    }
  },
  persist: {
    key: 'userInfo'
  }
})

3、默认存储的value是store中定义的所有所有数据，如果只需要存储部分数据，将需要存储的变量名添加到paths数组里面即可：

paths：[]                                                   表示整个state的数据都不持久化

paths：undefined或null                            表示持久化整个state的数据  

以下示例就是只存储token和user，id不存储：

export const useStoreUser = defineStore('use', {
  state: () => {
    return {
      user: '用户信息',
      id:1111111,
      token:123456789
    }
  },
  persist: {
    paths:['token','user']
  }
})

pinia-plugin-persistedstate的官方文档：

​​​​​快速开始 | pinia-plugin-persistedstate (prazdevs.github.io)