pinia状态管理自动持久化

发布日期: 2023-09-22 16:01:05 作者: Stephen 评论: 1

PiniaVue3 推荐的替代 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']
    }
})

b2b系统 11个月前
感谢分享,写得很好