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 都提供了灵活的方式来定义和持久化状态。这不仅增强了用户体验,还使得状态管理更加强大和灵活。


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

参考文章

相关推荐
Python大数据分析@1 分钟前
python操作CSV和excel,如何来做?
开发语言·python·excel
qq_390161776 分钟前
防抖函数--应用场景及示例
前端·javascript
上海_彭彭26 分钟前
【提效工具开发】Python功能模块执行和 SQL 执行 需求整理
开发语言·python·sql·测试工具·element
3345543234 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test36 分钟前
js下载excel示例demo
前端·javascript·excel
沈询-阿里38 分钟前
java-智能识别车牌号_基于spring ai和开源国产大模型_qwen vl
java·开发语言
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
残月只会敲键盘1 小时前
面相小白的php反序列化漏洞原理剖析
开发语言·php
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
ac-er88881 小时前
PHP弱类型安全问题
开发语言·安全·php