在vite项目中通过Pinia实现状态持久化在实际场景中的使用

最新推荐文章于 2025-03-25 11:11:49 发布

晚睡要秃头

最新推荐文章于 2025-03-25 11:11:49 发布

阅读量593

点赞数 3

分类专栏： vuex和pinia状态管理文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/qq_44971635/article/details/143178462

版权

vuex和pinia状态管理专栏收录该内容

2 篇文章

订阅专栏

文章目录

概要

状态持久化是指将应用程序的状态（例如 Vuex 或 Pinia 中的状态）保存到某种存储中，以便在用户刷新页面或重新打开应用时能够恢复这些状态。确保了用户在使用应用时的体验不会因页面刷新或重新加载而丢失。

状态持久化是什么

用户体验：持久化状态可以保持用户的设置、输入或其他交互状态，提升用户体验。
数据恢复：在页面崩溃或关闭后，用户能够恢复之前的操作状态，而不是从头开始。
方便调试：在开发过程中，可以更方便地跟踪和调试应用的状态变化。

常见的存储方式：

localStorage：浏览器提供的持久化存储，数据在浏览器关闭后仍然存在。
sessionStorage：与 localStorage 类似，但数据在浏览器标签页关闭后会被清除。
IndexedDB：浏览器的另一种存储机制，适合存储大量数据。
后端数据库：将状态数据发送到后端进行存储，适合需要跨设备同步的场景。

如何使用Pinia和持久化插件

1. 安装插件

npm install pinia-plugin-persistedstate

2. 配置 Pinia Store

// store/index.js
import { createPinia } from 'pinia';
import piniaPersistedState from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPersistedState);

export default pinia;

3. 定义 Store

// store/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  persist: true, // 启用持久化
  actions: {
    increment() {
      this.count++;
    },
  },
});

4. 在组件中使用 Store

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/store/counter';

const store = useCounterStore();
const { count, increment } = store;
</script>

5. 自定义持久化选项（可选）

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  persist: {
    key: 'my-custom-key', // 自定义存储的键
    storage: window.localStorage, // 使用 localStorage
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});

6.配置 Vite

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createPinia } from 'pinia';
import piniaPersistedState from 'pinia-plugin-persistedstate';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // Pinia 持久化插件
    {
      name: 'pinia-plugin-persistedstate',
      config: () => {
        const pinia = createPinia();
        pinia.use(piniaPersistedState);
        return {
          resolve: {
            alias: {
              '@': '/src',
            },
          },
          server: {
            port: 3000,
          },
        };
      },
    },
  ],
});

在实际场景中的使用

例如：确保用户的登录状态和信息在页面刷新后仍然保持

1、创建用户认证的 Store

// store/auth.js
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null, // 用户信息
    isAuthenticated: false, // 登录状态
  }),
  persist: true, // 启用持久化
  actions: {
    login(userData) {
      this.user = userData; // 设置用户信息
      this.isAuthenticated = true; // 更新登录状态
    },
    logout() {
      this.user = null; // 清除用户信息
      this.isAuthenticated = false; // 更新登录状态
    },
  },
});

2、在组件中使用 Store

<template>
  <div>
    <h1>登录</h1>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useAuthStore } from '@/store/auth';

const store = useAuthStore();
const username = ref('');
const password = ref('');

const handleLogin = () => {
  // 模拟登录逻辑
  const userData = { username: username.value }; // 假设从服务器获取的用户数据
  store.login(userData); // 调用 login 方法
  // 可能会在这里导航到其他页面
};
</script>

3、检查用户状态

<template>
  <div>
    <h1>欢迎, {{ user?.username }}</h1>
    <button @click="handleLogout">登出</button>
  </div>
</template>

<script setup>
import { useAuthStore } from '@/store/auth';

const store = useAuthStore();
const user = store.user;

const handleLogout = () => {
  store.logout(); // 调用 logout 方法
};
</script>