Vue3 Pinia持久化存储

Vue3 Pinia持久化存储

一、引言

在现代前端开发中，状态管理是构建交互式应用的核心部分。Vue3 引入了 Composition API，而 Pinia 成为了官方推荐的状态管理库。Pinia 不仅提供了简洁的 API，还支持持久化存储，这意味着我们可以将应用的状态保存在本地存储中，以便在页面刷新或重新加载后恢复状态。

二、安装Pinia和持久化插件

1、安装

可以通过 npm、yarn 或 pnpm 安装 Pinia 和持久化插件。

# 使用 npm
npm install pinia pinia-plugin-persist# 使用 yarn
yarn add pinia pinia-plugin-persist# 使用 pnpm
pnpm i pinia pinia-plugin-persist

2、注册持久化插件

在创建 Pinia 实例时，注册 pinia-plugin-persist 插件。

// src/stores/pinia.js
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'const pinia = createPinia()
pinia.use(piniaPluginPersist)export default pinia

三、定义Store并启用持久化

1、组合式API定义Store

使用组合式 API 定义 Store，并设置 persist 选项来启用持久化。

// src/stores/user.js
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({username: '',token: ''}),actions: {login(username, token) {this.username = usernamethis.token = token},logout() {this.username = ''this.token = ''}},persist: {enabled: true,strategies: [{key: 'user',storage: localStorage}]}
})

2、选项式API定义Store

使用选项式 API 定义 Store，并同样设置 persist 选项。

// src/stores/cart.js
import { defineStore } from 'pinia'export const useCartStore = defineStore('cart', {persist: true,state: () => ({items: []}),getters: {itemCount: (state) => state.items.length},actions: {addItem(item) {this.items.push(item)},clearCart() {this.items = []}}
})

四、使用Store

在组件中使用定义好的 Store。

<template><div><div>Username: {{ userStore.username }}</div><button @click="userStore.login('kimi', '123456')">Login</button><button @click="userStore.logout">Logout</button><div>Cart Item Count: {{ cartStore.itemCount }}</div><button @click="cartStore.addItem({ id: 1, name: 'Apple' })">Add Apple</button><button @click="cartStore.clearCart">Clear Cart</button></div>
</template><script setup>
import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/cart'const userStore = useUserStore()
const cartStore = useCartStore()
</script>

五、高级持久化配置

1、自定义存储的key值和存储方式

persist: {enabled: true,strategies: [{key: 'custom_user',storage: sessionStorage // 使用 sessionStorage 而不是 localStorage}]
}

2、选择性存储对应字段

persist: {enabled: true,strategies: [{storage: localStorage,paths: ['username'] // 只持久化 username 字段}]
}

六、总结

通过使用 Pinia 和 pinia-plugin-persist 插件，我们可以轻松实现状态的持久化存储。无论是使用组合式 API 还是选项式 API，Pinia 都提供了灵活的方式来定义和持久化状态。这不仅增强了用户体验，还使得状态管理更加强大和灵活。

---

版权声明：本博客内容为原创，转载请保留原文链接及作者信息。

参考文章：

• Vue3 pinia持久化存储（组合式Api案例演示）
• Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)