Vue3 Pinia配套的持久化插件Persistedstate

前言

Vue3使用了更加简单的Pinia, 名字跟前代完全没有继承性，不知道为啥起一个乱七八糟的名字还跟vue不沾边，又不能脱离vue单独使用，继续叫vuex是有啥困难吗？完全不懂，总之vue3中的很多编程哲学我基本不认同，跑题了，这里主要讲官方的Pinia持久化插件。

背景

前端开发时，总需要存储一些数据让所有页面都能用到，最典型的，就是当前登录人信息，登录后，无论到哪个页面都需要获取登录人的token来发送请求，这就涉及到持久化，最早持久化是使用cookie进行，随着现代浏览器功能越来越强大，目前主流使用LocalStorage, 使用LocalStorage虽然简单，但总要每个项目写一遍重复的代码，也挺麻烦，这时候就要用到本文主角了

Pinia Plugin Persistedstate

官网：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/
文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

安装

1. 选择自己喜欢的包管理器安装

npm i pinia-plugin-persistedstate
# pnpm add 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)

用法

• setup语法

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useStore = defineStore(
  'app-user',
  () => {
    const user = ref(null)
    return { user }
  },
  //配置该参数，即可自动使用LocalStorage存储，key=app-user,value=JSON.stringify(user)
  {
    persist: true,
  },
)

• option语法

import { defineStore } from 'pinia'

export const useStore = defineStore('app-user', {
  state: () => {
    return {
      user: null,
    }
  },
  persist: true,
})

安装后，仅仅需要加一个persist: true,即可自动保存本地，本地有值会优先从本地读取，默认使用LocalStorage做存储

高级配置

插件支持自定义key值，配置需要的存储，也支持选择部分属性保存，这些功能一般情况下用到的很少，用到时可参考官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/config.html