pinia 持久化插件使用

官方文档

本文主要介绍 vue3组合式 api 使用持久化插件的写法。
选项式 写法官方已给出

1. 安装依赖

pnpm i pinia-plugin-persistedstate

2. 插件的使用

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

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

3. 组合式api的写法

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

export const useUserStore = defineStore('user', () => {
        const token = ref('')
        const userInfo = ref({})
        return {
            token,
            userInfo
        }
    },
    {
        persist: {
            key: 'my-user',  // 修改存储到localStorage时的key值
            storage: localStorage // 以哪种类型存储 localStorage|sessionStorage
            paths: ['token']  // 默认全部持久化，这里可以配置想要哪个变量持久化
        }
    }
)