Vue核心知识： pinia持久化插件具体怎么使用？

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

1. 安装插件

首先，你需要安装 pinia-plugin-persistedstate 插件。可以使用 npm、yarn 或 pnpm 来安装：

npm install pinia-plugin-persistedstate

或者

yarn add pinia-plugin-persistedstate

或者

pnpm add pinia-plugin-persistedstate

2. 配置 Pinia 并使用插件

在创建 Pinia 实例时，使用 pinia-plugin-persistedstate 插件：

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

pinia.use(piniaPluginPersistedstate);
app.use(pinia);
app.mount('#app');

3. 配置 Store 以使用持久化

在定义 Pinia store 时，通过 persist 选项启用持久化功能。以下是一个简单的示例：
JavaScript复制
// src/stores/user.js
import { defineStore } from ‘pinia’;

export const useUserStore = defineStore(‘user’, {
state: () => ({
isLoggedIn: false,
user: null
}),
actions: {
login(user) {
this.isLoggedIn = true;
this.user = user;
},
logout() {
this.isLoggedIn = false;
this.user = null;
}
},
persist: true, // 启用持久化
});
在这个示例中，persist: true 选项启用了持久化功能，默认情况下，状态将被保存到 localStorage 中。你也可以通过配置对象来自定义持久化的行为，例如指定存储的键名、存储位置（localStorage 或 sessionStorage）等。

4. 高级配置

4.1 自定义存储键名

你可以通过 key 选项自定义存储的键名：

export const useUserStore = defineStore('user', {
  state: () => ({
    isLoggedIn: false,
    user: null
  }),
  actions: {
    login(user) {
      this.isLoggedIn = true;
      this.user = user;
    },
    logout() {
      this.isLoggedIn = false;
      this.user = null;
    }
  },
  persist: {
    key: 'my-custom-key', // 自定义存储的键名
  },
});

4.2 指定存储位置

你可以通过 storage 选项指定存储位置，例如 sessionStorage：

export const useUserStore = defineStore('user', {
  state: () => ({
    isLoggedIn: false,
    user: null
  }),
  actions: {
    login(user) {
      this.isLoggedIn = true;
      this.user = user;
    },
    logout() {
      this.isLoggedIn = false;
      this.user = null;
    }
  },
  persist: {
    storage: sessionStorage, // 使用 sessionStorage
  },
});

4.3 选择性持久化

你可以通过 paths 选项选择性地持久化部分状态：

export const useUserStore = defineStore('user', {
  state: () => ({
    isLoggedIn: false,
    user: null,
    token: null
  }),
  actions: {
    login(user, token) {
      this.isLoggedIn = true;
      this.user = user;
      this.token = token;
    },
    logout() {
      this.isLoggedIn = false;
      this.user = null;
      this.token = null;
    }
  },
  persist: {
    paths: ['isLoggedIn', 'user'], // 只持久化 isLoggedIn 和 user
  },
});

4.4 自定义序列化器

你可以通过 serializer 选项自定义序列化器和反序列化器：

import { defineStore } from 'pinia';
import { parse, stringify } from 'zipson';

export const useUserStore = defineStore('user', {
  state: () => ({
    isLoggedIn: false,
    user: null
  }),
  actions: {
    login(user) {
      this.isLoggedIn = true;
      this.user = user;
    },
    logout() {
      this.isLoggedIn = false;
      this.user = null;
    }
  },
  persist: {
    serializer: {
      serialize: stringify, // 自定义序列化函数
      deserialize: parse // 自定义反序列化函数
    }
  },
});

5. 使用 Nuxt

如果你使用 Nuxt，pinia-plugin-persistedstate 提供了开箱即用的 SSR 支持。你只需在 nuxt.config.ts 中添加模块即可：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt', // 必须
    'pinia-plugin-persistedstate/nuxt',
  ],
});

更多关于 Nuxt 的存储和配置信息可以在这里找到：Nuxt 使用文档。

6. 限制

使用 pinia-plugin-persistedstate 时需要注意以下限制：
存储限制：localStorage 和 sessionStorage 的存储容量有限，通常为 5MB 左右。如果存储的数据量过大，可能会导致存储失败。
安全性：存储在 localStorage 和 sessionStorage 中的数据是明文存储的，容易被恶意用户篡改。如果存储的数据包含敏感信息，需要进行加密处理。
兼容性：localStorage 和 sessionStorage 在所有现代浏览器中都得到了支持，但在一些旧版本的浏览器中可能不支持。如果需要支持旧版本浏览器，需要进行兼容性处理。

7. 示例代码

以下是一个完整的示例，展示了如何使用 pinia-plugin-persistedstate 插件实现 Pinia 状态的持久化。

7.1 安装插件

npm install pinia-plugin-persistedstate

7.2 配置 Pinia 实例

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

pinia.use(piniaPluginPersistedstate);
app.use(pinia);
app.mount('#app');

7.3 创建 Store

// src/stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    isLoggedIn: false,
    user: null
  }),
  actions: {
    login(user) {
      this.isLoggedIn = true;
      this.user = user;
    },
    logout() {
      this.isLoggedIn = false;
      this.user = null;
    }
  },
  persist: {
    key: 'user-store', // 自定义存储的键名
    storage: localStorage, // 使用 localStorage
    paths: ['isLoggedIn', 'user'], // 只持久化 isLoggedIn 和 user
    serializer: {
      serialize: JSON.stringify, // 自定义序列化函数
      deserialize: JSON.parse // 自定义反序列化函数
    }
  },
});

7.4 在组件中使用 Store

<template>
  <div>
    <p v-if="userStore.isLoggedIn">Welcome, {{ userStore.user.name }}!</p>
    <button @click="login">Login</button>
    <button @click="logout">Logout</button>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();

function login() {
  userStore.login({ name: 'John Doe' });
}

function logout() {
  userStore.logout();
}
</script>

8. 总结

通过使用 pinia-plugin-persistedstate 插件，可以轻松实现 Pinia 状态的持久化存储，防止页面刷新后数据丢失。插件的配置非常灵活，可以指定哪些状态需要持久化，以及使用哪种存储方式。在实际开发中，推荐使用插件来简化开发过程，提高开发效率。

9. 注意事项

存储限制：localStorage 和 sessionStorage 的存储容量有限，通常为 5MB 左右。如果存储的数据量过大，可能会导致存储失败。
安全性：存储在 localStorage 和 sessionStorage 中的数据是明文存储的，容易被恶意用户篡改。如果存储的数据包含敏感信息，需要进行加密处理。
兼容性：localStorage 和 sessionStorage 在所有现代浏览器中都得到了支持，但在一些旧版本的浏览器中可能不支持。如果需要支持旧版本浏览器，需要进行兼容性处理。

自己的框架自己用着才开心