让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

Pinia是Vue 3中官方推荐的状态管理库，它被设计为对Vuex的轻量替代，并与Vue 3的Composition API紧密集成。Pinia相比于Vuex具有更简洁的API、更好的类型推导和更高效的性能表现。在Vue 3中，Pinia的使用场景非常广泛，尤其是在需要全局状态管理的应用中，如用户认证、购物车、主题切换等。

在这篇文章中，我将详细介绍Pinia的使用，包括其原理、典型用法、与localStorage和sessionStorage的结合使用，以及如何使用Pinia管理本地存储。我们将深入探讨Pinia的基本功能和实现方式，并通过示例来演示它的应用。

1. Pinia简介

Pinia 是由 Vue.js 核心团队成员开发的 Vue 3 状态管理库。它作为 Vuex 的继任者，提供了更加现代化和简洁的 API，利用 Vue 3 的 Composition API 特性，使得状态管理的使用变得更加直观。

Pinia 主要包括以下特点：

• 简洁的 API：与 Vuex 相比，Pinia 的 API 更加简洁，易于理解，尤其是对于 Composition API 用户。
• 支持模块化：Pinia 支持多模块的状态管理，每个模块可以包含自己的状态、getter、actions。
• 类型推导：通过 TypeScript 的类型推导，Pinia 的状态、getter 和 actions 能够提供更好的开发体验。
• 与 Vue 3 完美兼容：Pinia 是专为 Vue 3 设计的，利用了 Vue 3 的 Composition API，因此能够更加灵活和高效地管理状态。

1.1 安装 Pinia

要在 Vue 3 项目中使用 Pinia，首先需要安装它：

npm install pinia

然后，在项目的入口文件中（通常是 main.js 或 main.ts），引入并注册 Pinia：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

2. Pinia的核心概念

2.1 Store

在Pinia中，Store是用来管理全局状态的主要概念。我们通过创建store来存储和操作应用的状态，类似于Vuex中的store。

Pinia的store是基于defineStore函数创建的。这个函数返回一个包含状态、getter和action的对象。

• State：存储状态的数据。
• Getter：从状态派生的计算属性。
• Action：用于修改状态的函数。

2.2 创建和使用 Pinia Store

一个简单的Pinia store可以这样创建：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  actions: {
    increment() {
      this.count++;
    }
  }
});

在组件中使用这个store：

<template>
  <div>
    <p>{{ counter.count }}</p>
    <p>{{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script>
import { useCounterStore } from './stores/counter';

export default {
  setup() {
    const counter = useCounterStore();
    return { counter };
  }
};
</script>

2.3 State、Getter和Action

• State：定义了存储在store中的状态。
• Getter：类似于Vue的计算属性，可以通过getter方法从state派生出数据，getter是基于state值计算的，因此它们会自动响应state的变化。
• Action：用于修改state的函数。actions与mutations在Vuex中的作用类似，但Pinia没有单独的mutations概念。

3. 在Pinia中使用localStorage和sessionStorage

在实际开发中，我们经常需要将状态持久化，尤其是用户的登录信息、购物车、主题设置等。Vuex本身没有直接提供持久化的功能，因此开发者需要借助插件或者自行实现。而Pinia提供了更加灵活和现代化的方式来进行状态持久化。

3.1 持久化插件

为了简化Pinia store的持久化操作，我们可以借助一些第三方库或者自己实现。在本节中，我们将演示如何将Pinia store的数据持久化到localStorage或sessionStorage。

使用 pinia-plugin-persistedstate

pinia-plugin-persistedstate是一个官方推荐的插件，它能够帮助我们将Pinia的状态自动保存到localStorage或sessionStorage中。

首先，安装插件：

npm install pinia-plugin-persistedstate

然后，在创建Pinia实例时，注册这个插件：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import persistedState from 'pinia-plugin-persistedstate';
import App from './App.vue';

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

const app = createApp(App);
app.use(pinia);
app.mount('#app');

接下来，在store中使用persistedstate插件，使store的数据自动持久化：

import { defineStore } from 'pinia';

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

通过设置persist: true，Pinia会自动将这个store的状态保存到localStorage中。你也可以通过配置来指定使用sessionStorage。

3.2 手动实现持久化

如果不想使用第三方插件，我们也可以手动实现localStorage和sessionStorage的持久化。实现思路是：在store的state发生变化时，将其存储到localStorage或sessionStorage中；当组件重新加载时，从localStorage或sessionStorage中读取数据。

首先，我们创建一个store，手动实现持久化：

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    email: ''
  }),
  actions: {
    setUserData(data) {
      this.name = data.name;
      this.email = data.email;
    }
  },
  persist: {
    key: 'user', // 可以设置自定义的storage key
    storage: localStorage, // 设置存储位置
    paths: ['name', 'email'] // 只持久化部分state
  }
});

在上述代码中，我们指定了localStorage为持久化存储，paths属性则告诉Pinia只保存name和email这两个字段。

3.3 使用localStorage和sessionStorage

• localStorage：localStorage会在浏览器关闭后依然保持数据，适用于需要长期保存的数据（如用户的登录状态、主题设置等）。
• sessionStorage：sessionStorage只在当前会话中有效，一旦关闭浏览器或标签页，数据就会丢失，适合临时性的数据（如临时的用户数据或表单信息）。

手动实现时，你可以选择使用这两者中的任意一个，具体使用localStorage还是sessionStorage，取决于你的需求。

示例：使用localStorage保存用户信息

假设你需要保存用户的登录信息：

import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: '',
    user: null
  }),
  actions: {
    login(token, user) {
      this.token = token;
      this.user = user;
      localStorage.setItem('auth', JSON.stringify({ token, user }));
    },
    logout() {
      this.token = '';
      this.user = null;
      localStorage.removeItem('auth');
    }
  }
});

在这个例子中，当用户登录时，我们将token和user对象保存在localStorage中，退出时清除localStorage中的数据。

4. 总结

Pinia是一个现代化的、轻量级的状态管理工具，充分利用了Vue 3中的Composition API，简化了状态管理的复杂性。通过Pinia，我们能够轻松地管理应用的状态，尤其在使用localStorage和sessionStorage进行数据持久化时，Pinia提供了灵活而简单的解决方案

。

• Pinia的核心：Pinia提供了state、getter和actions来管理全局状态，并且通过defineStore来创建store。
• 持久化存储：Pinia可以通过插件或者手动方式将状态持久化到localStorage和sessionStorage中，方便在页面刷新后恢复数据。