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 = username
      this.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详细配置)