文章目录
- Vue3 Pinia持久化存储
- 一、引言
- 二、安装Pinia和持久化插件
- 1、安装
- 2、注册持久化插件
- 三、定义Store并启用持久化
- 1、组合式API定义Store
- 2、选项式API定义Store
- 四、使用Store
- 五、高级持久化配置
- 1、自定义存储的key值和存储方式
- 2、选择性存储对应字段
- 六、总结
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详细配置)