Pinia持久化插件 pinia-plugin-persistedstate 的基本使用
前言 在Vue项目开发过程中,状态管理是至关重要的环节。随着Pinia的推出,它凭借更简洁直观的API,逐渐成为Vuex的有力替代品。为了进一步简化本地存储的管理,pinia-plugin-persistedstate 插件应运而生,它能够帮助开发者轻松实现状态的持久化。 本文将详细介绍如何使用该插件,并解决在跨项目登录时由于数据格式不一致导致的问题。 安装插件 在项目的根目录下运行以下命令以安装插件: npm i pinia-plugin-persistedstate 随后,在main.ts文件中引入并配置插件: import { createPinia } from 'pinia' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' const pinia = createPinia() pinia.use(piniaPluginPersistedstate) 完成以上步骤后,Pinia便具备了持久化功能。 基本使用 假设我们需要管理用户信息userInfo,并将其持久化到本地存储中,那么就可以这样实现: import { defineStore } from 'pinia'; export const useUserInfoStore = defineStore('userInfo', { state: () => ({ userInfo: null as any }), persist: true, actions: { setUserInfo(info: any) { this.userInfo = info; } } }); 按照上述配置,用户信息将自动持久化到本地存储中。 仅持久化对象中的特定字段 在实际应用中,开发者可能会面临跨项目登录时出现的兼容性问题。具体场景为:用户在项目A完成登录操作后,随即打开项目B。由于Token的复用机制,项目B会自动完成登录流程。然而,在尝试获取用户信息userInfo时,由于不同项目对数据格式的定义存在差异,导致项目B无法准确获取用户的ID,进而无法基于此ID发起正确的网络请求。具体表现如下: 项目A的数据格式:{ name: 'xiaoming', nick_name: '小明', userID: '9527' } 项目B的数据格式:{ userInfo: { name: 'xiaoming', nick_name: '小明', userID: '9527' } } 由于插件默认将整个state对象存储起来,导致数据多了一层userInfo外壳,从而引发格式不一致的问题。 为了去掉userInfo这一层外壳,我们需要自定义序列化和反序列化逻辑。修改后的Store配置如下: import { defineStore } from 'pinia'; export const useUserInfoStore = defineStore('userInfo', { state: () => ({ userInfo: null as any }), persist: { key: 'userInfo', storage: localStorage, paths: ['userInfo'], // 明确声明要持久化的字段 serializer: { serialize: (state: any) => JSON.stringify(state.userInfo), deserialize: (str: string) => ({ userInfo: JSON.parse(str) }) } } as any, actions: { setUserInfo(info: any) { this.userInfo = info; } } }); 经过上述配置,用户信息的存储结构变为{ name: 'xiaoming', nick_name: '小明', userID: '9527' },不再有额外的userInfo外壳,从而解决了跨项目登录时的格式不一致问题。 ...