vue3 pinia 持久化

Vue3 Pinia 是一个非常流行的状态管理库，它提供了一种简单的方式来管理 Vue3 应用程序的状态。如果你想要实现 Pinia 的状态持久化，可以使用 Vuex Persistedstate 插件。这个插件可以让你将 Vuex 的状态持久化到浏览器的本地存储中，以便在页面刷新或关闭后仍然可以保留状态。

对于 Pinia，你可以使用类似的方式来实现持久化。你需要使用一个名为 `pinia-plugin-persist` 的插件来实现状态持久化。这个插件基于浏览器的本地存储，可以将 Pinia 的状态持久化到本地存储中，以便在页面刷新或关闭后仍然可以保留状态。

以下是一个使用 `pinia-plugin-persist` 插件实现 Pinia 状态持久化的例子：

import { createPinia } from 'pinia'
import { createPersist } from 'pinia-plugin-persist'

const pinia = createPinia()

// 使用 createPersist 插件来实现状态持久化
pinia.use(createPersist({
  // 可以设置持久化的 key，这里设置为 'my-app'
  key: 'my-app',
  // 可以设置持久化的存储方式，这里设置为 localStorage
  storage: window.localStorage,
}))

export default pinia

在上面的例子中，我们首先创建了一个 Pinia 实例。然后，我们使用 `createPersist` 插件来实现状态持久化。在插件的参数中，我们可以设置持久化的键值，这里设置为 'my-app'，并且设置了存储方式为 localStorage。这样，Pinia 的状态就可以持久化到浏览器的本地存储中了。

除了使用 `localStorage`，你还可以使用其他的存储方式，例如 `sessionStorage` 或者 IndexedDB。只需要将 `storage` 参数设置为相应的存储方式即可。

需要注意的是，对于一些敏感的数据，例如用户的登录信息，最好不要将其存储在浏览器的本地存储中，而是应该使用安全的方式进行存储和传输。