Pinia 数据持久化储存：使用 pinia-plugin-persistedstate 插件

Pinia 是一个用于 Vue.js 的状态管理库，它提供了一种简单、可扩展的方式来管理应用程序的状态。然而，当应用程序的状态较大或需要在多个会话之间持久化时，Pinia 本身并不提供数据持久化的功能。为了解决这个问题，我们可以使用 pinia-plugin-persistedstate 插件来实现 Pinia 数据持久化储存。
pinia-plugin-persistedstate 插件可以帮助我们将 Pinia store 中的数据持久化存储，这样即使在关闭应用程序或刷新页面后，数据也不会丢失。下面是如何使用 pinia-plugin-persistedstate 插件进行数据持久化储存的步骤：

1. 安装插件
   使用 npm 或 yarn 安装 pinia-plugin-persistedstate 插件：

   npm i pinia-plugin-persistedstate --save

   或者

   yarn add pinia-plugin-persistedstate

2. 引入插件并使用
   在 store/index.ts 文件中引入并挂载插件：

   import { createPinia, defineStore } from 'pinia';
   import piniaPluginPersist from 'pinia-plugin-persistedstate';
   const store = createPinia();
   store.use(piniaPluginPersist);
   export default store;

   这样，我们就成功地使用了 pinia-plugin-persistedstate 插件来进行数据持久化储存。现在，我们可以在 store 中定义持久化的状态，并在需要时进行读取和修改。
3. 定义持久化的状态
   在 store 中定义持久化的状态，可以直接在 state 同级下面添加 persist 对象。例如：

   export const useUserStore = defineStore({
   id: 'userId',
   state: () => {
   return {
   userInfo: {
   name: 'Ghmin',
   age: 18,
   sex: '男'
   },
   persist: {
   count: 0,
   visited: false
   }
   };
   }
   });

   在上面的例子中，我们将 userInfo 和 persist 对象定义在 state 中。persist 对象包含 count 和 visited 两个属性，它们将被持久化存储。
4. 读取和修改持久化的状态
   在组件中，我们可以像访问普通状态一样访问持久化的状态。例如：

   import { useUserStore } from './store';
   const { userInfo, persist } = useUserStore();
   console.log(userInfo); // 输出 Ghmin, 18, 男
   console.log(persist.count); // 输出 0
   persist.count++; // 将 count 的值加一
   console.log(persist.count); // 输出 1

   在上面的例子中，我们通过 useUserStore() 导入了用户 store，并分别访问了 userInfo 和 persist 对象中的属性。然后，我们将 persist.count 的值加一进行了修改。
   需要注意的是，当我们将数据持久化存储时，需要考虑数据的安全性和隐私性。因此，在实际应用中，我们应该谨慎地选择需要持久化的数据，并采取必要的安全措施来保护用户的数据安全和隐私。