Vue3 Pinia持久化存储

文章目录

Vue3 Pinia持久化存储

一、引言

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

二、安装Pinia和持久化插件

1、安装

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

bash 复制代码
# 使用 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 插件。

javascript 复制代码
// 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 选项来启用持久化。

javascript 复制代码
// src/stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    username: '',
    token: ''
  }),
  actions: {
    login(username, token) {
      this.username = username
      this.token = token
    },
    logout() {
      this.username = ''
      this.token = ''
    }
  },
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'user',
        storage: localStorage
      }
    ]
  }
})

2、选项式API定义Store

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

javascript 复制代码
// 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。

vue 复制代码
<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值和存储方式

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

2、选择性存储对应字段

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

六、总结

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


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

参考文章

相关推荐
开发者工具分享4 分钟前
如何应对敏捷转型中的团队阻力
开发语言
疯狂的沙粒7 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
gregmankiw11 分钟前
C#调用Rust动态链接库DLL的案例
开发语言·rust·c#
roman_日积跬步-终至千里26 分钟前
【Go语言基础【20】】Go的包与工程
开发语言·后端·golang
xiaominlaopodaren27 分钟前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX28 分钟前
一句话解释JS链式调用
前端·javascript
1024小神30 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
古夕39 分钟前
如何将异步操作封装为Promise
前端·javascript
@一枝梅1 小时前
vue3 vite.config.js 引入bem.scss文件报错
javascript·rust·vue·scss
秦少游在淮海1 小时前
C++ - string 的使用 #auto #范围for #访问及遍历操作 #容量操作 #修改操作 #其他操作 #非成员函数
开发语言·c++·stl·string·范围for·auto·string 的使用