Pinia 是 Vue3 推荐的替代 Vuex 的状态管理存储库，它允许您跨组件/页面共享状态，以往实现持久化需要手动 localStorage ，这次借助 pinia 的一个插件 pinia-plugin-persistedstate 实现状态自动持久化。

安装

# yarn
yarn add pinia-plugin-persistedstate
# npm
npm i pinia-plugin-persistedstate
#pnpm
pnpm add pinia-plugin-persistedstate -D

引入插件

stores/index.ts

import { createPinia } from 'pinia';
import useUserStore from './modules/user';
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia().use(persist);

export { useUserStore };

export default pinia;

模块持久化

stores/modules/user.ts

defineStore('user', {
    ...
    // 所有数据持久化
    persist: true
})

自定义

配置 persist: true ，表示所有数据持久化，也可以设置为对象，自定义持久化配置

defineStore('user', {
    state: () => {
        return {
            userinfo: {
                nickname: 'Stephen',
                address: '',
                avatar: 'https://xxx.com/1.jpg'
            },
            config: {
                language: 'zh-cn',
                theme: 'dark'
            }
        }
    }
    ...
    persist: {
        // 修改存储中使用的键名称，默认为当前 Store 的 id
        key: 'user-key',
        // 默认为localStorage
        storage: window.sessionStorage,
        // 自定义需持久化的状态，支持(.)路径
        // []：不被持久化，默认：undefined，持久化所有状态
        paths: ['userinfo', 'config.theme']
    }
})