补充：pinia 持久化

前言

在使用的时候发现 pinia 里存储的用户信息，刷新就没有了，其实这点也可以理解，因为是基于内存的，每个页面都有自己独立的 JavaScript 执行环境和内存空间。当一个页面被加载时，浏览器会为其创建一个全新的 JavaScript 上下文，包括内存空间、变量和对象。这意味着每个页面都有自己的数据存储，并且无法直接访问其他页面的内存空间。

此刻我有个疑惑是，使用 pinia 是不是必须要持久化呢？就比如存储用户基本信息这样的场景，如果不持久化就不满足我想要的效果，总不可能每次都去请求一下用户基础信息。那到底什么样的场景适合直接使用 pinia。

我查阅了一些资料，最后得出了一个现阶段我对于 pinia 使用的一个认知。

1. 不需要持久化的场景

这个我想了一下，列举了几个我能想到的场景

• 实时的数据展示： 比如一个实时聊天页面，或者实时的绘制折线图的场景比如股票价格，这些数据只需要展示当前时刻，以及往后不断积累数据展示，保持当前页面最新，刷新后重新开始。
• 临时状态：当我们操作页面时，前面的一些状态对于后续操作有影响，例如临时的表单数据或者选项选择，这些状态刷新后不需要保持不变
• UI 状态: 某些状态可能仅与用户界面相关，例如展开/折叠的面板、选项卡选择或滚动位置。这些状态通常不需要在重新加载应用程序时进行持久化。
• 临时错误状态：临时错误状态：对于错误信息或警告信息，您可以在需要时存储在状态中，以向用户显示相应的提示。这些错误状态通常不需要在刷新页面时进行持久化。

2. 持久化场景

其实就是针对一些频繁访问，并且不经常发生变化的数据进行持久化，减少对服务端的请求。一方面减少服务压力，另一方面由于从缓存中取，更快，提升体验。常见场景就是下面

• 用户认证授权：用户认证授权信息
• 用户个性化设置：比如语言，主题偏好这些

3. 使用 pinia-plugin-persistedstate 持久化

之前我们使用的 LocalStorage 就是一种持久化方案，那么如何将 pinia 的存储也整合上去。 好在官方已经提供了现成的插件，我们直接使用就好，不必自己手动去 setItem(token) 了， 想进一步了解可参考官方文档：prazdevs.github.io/pinia-plugi…

3.1 安装依赖

npm i pinia-plugin-persistedstate

3.2 将插件添加到 pinia 实例上

./stores/index.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const store = createPinia()

store.use(piniaPluginPersistedstate)

export default store

3.3 在需要持久化的 store 里开启持久化

import { defineStore } from 'pinia'
import type { LoginData, UserInfo } from '@/types/user'
import { setItem } from '@/utils/storage'
import { TOKEN } from '../constant'
import { login, getUserInfo } from '@/api/user'

export const useUserInfoStore = defineStore('userInfo', {
  state: () => {
    // 用户信息
    return {
      user: {} as UserInfo
    }
  },

  actions: {
    // 登录获取token
    async login(loginForm: LoginData) {
      const token = await login(loginForm)
      setItem(TOKEN, token)
    },

    // 获取用户信息
    async getUserInfo() {
      this.user = await getUserInfo()
    }
  },
  persist: true
})

3.4 测试

登录成功后刷新，数据不会丢失了，并且可以看到存储在了localStorage里

TIPS

这里持久化的配置是可以设置的，据我大致了解，存进的 key 值默认取得是 store 定义的 name，默认的是 localStorage 存储，可以换成其他，具体看这里：prazdevs.github.io/pinia-plugi…