【前端学习笔记】Pinia

1.介绍

Pinia 是 Vue 3 中的官方状态管理库，作为 Vuex 的继任者，它为 Vue 3 提供了一个更现代、更灵活、更易用的状态管理解决方案。Pinia 主要用于管理应用中的全局状态，并提供了一个清晰、简洁的 API 来处理复杂的状态逻辑、数据流和副作用。

Pinia 与 Vuex 相比，具有更简洁的 API、更好的 TypeScript 支持、更强的模块化和灵活性。下面是对 Pinia 的详细解读，包括其核心概念、如何使用以及它的一些优势。

更简洁的 API：Pinia 的 API 更加简洁直观，避免了 Vuex 中的一些冗长代码（如 mutations、getters）。
TypeScript 原生支持：Pinia 提供了更好的 TypeScript 类型推导和支持，使得开发过程中可以享受更好的类型检查和自动完成功能。
模块化设计：Pinia 支持模块化，每个 store 都可以独立于其他 store 使用，便于拆分和维护。
兼容 Vue 3 和 Composition API：Pinia 与 Vue 3 的 Composition API 紧密集成，提供了一个现代化的、以函数式为核心的状态管理方式。

2.使用

Pinia 是 Vue 3 中的官方状态管理库，作为 Vuex 的继任者，它为 Vue 3 提供了一个更现代、更灵活、更易用的状态管理解决方案。Pinia 主要用于管理应用中的全局状态，并提供了一个清晰、简洁的 API 来处理复杂的状态逻辑、数据流和副作用。

1. 为什么使用 Pinia？

在 Vue 3 中，Pinia 是为了替代 Vuex 作为更现代、更轻量级的状态管理解决方案。其设计哲学是简洁、灵活、易用，适用于 Vue 3 的 Composition API。相较于 Vuex，Pinia 具有以下优势：

更简洁的 API：Pinia 的 API 更加简洁直观，避免了 Vuex 中的一些冗长代码（如 mutations）。
TypeScript 原生支持：Pinia 提供了更好的 TypeScript 类型推导和支持，使得开发过程中可以享受更好的类型检查和自动完成功能。
模块化设计：Pinia 支持模块化，每个 store 都可以独立于其他 store 使用，便于拆分和维护。
兼容 Vue 3 和 Composition API：Pinia 与 Vue 3 的 Composition API 紧密集成，提供了一个现代化的、以函数式为核心的状态管理方式。

2. Pinia 核心概念

Pinia 主要有三个核心概念：

Store：
- Pinia 的核心是 store，它是管理状态的容器，类似于 Vuex 中的 store。每个 store 都是一个包含状态、getter 和 actions 的对象。
- Store 用来存储应用中的 全局状态，可以在应用中的任意组件之间共享这些状态。
State：
- Pinia 的 store 包含 state，也就是我们管理的应用状态。它通常是一个普通的 JavaScript 对象或者数组，包含了你要在应用中共享的数据。
Actions：
- Pinia 使用 actions 来更新 state 或执行副作用操作。与 Vuex 不同，Pinia 中的 actions 可以直接修改 state，而不需要通过 mutations。

3. 如何使用 Pinia？

首先，在你的 Vue 3 项目中创建一个 Pinia 实例，然后将其传递给 Vue 实例。一般来说，这个步骤会在 main.ts 或 main.js 中完成。

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

const app = createApp(App)

// 创建并注册 Pinia 实例
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

在 Pinia 中，每个 store 是通过 defineStore 函数定义的，它接收两个参数：

store 的名称。
一个函数，返回 store 的state、getter 和 actions。

// stores/counter.js
import { defineStore } from 'pinia'

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

在上面的代码中，useCounterStore 是一个 store，它包含：

state：存储数据的地方。
actions：用来修改 state 的方法。
getters：计算派生状态的函数，类似于 Vuex 中的 getter。

3.4 使用 Store

在组件中，你可以使用 useCounterStore 来访问和修改 store 中的状态。

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

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

// 使用 Pinia store
const counter = useCounterStore()
</script>

通过 useCounterStore()，你可以访问 store 中的状态、actions 和 getters。在模板中，直接访问 counter.count 或 counter.doubleCount 就能显示当前的状态。

Store 的模块化

Pinia 支持将 store 划分为多个模块，每个模块可以包含不同的 state、actions 和 getters，类似于 Vuex 的模块化设计。你可以根据功能模块来组织 store。

例如，你可以在 stores 目录下创建多个文件，分别定义不同的 store。

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
    age: 30
  }),
  actions: {
    updateName(newName) {
      this.name = newName
    }
  }
})

在 App.vue 中，你可以像使用其他 store 一样使用不同的 store。

import { useUserStore } from './stores/user'

const user = useUserStore()
console.log(user.name)  // 'John Doe'
user.updateName('Jane Doe')

4. Pinia 与 Vuex 的对比

特性	Pinia	Vuex
支持 Vue 3	原生支持，专为 Vue 3 设计	也支持 Vue 3，但需要额外的配置和适配
API 简洁	使用 `defineStore` 定义 store，简洁明了	需要 `state`、`mutations`、`actions`、`getters`
TypeScript 支持	原生支持 TypeScript，类型推导更好	支持，但不如 Pinia 高效和简单
模块化	本身支持模块化，每个 store 可以独立	需要使用 `modules` 配置来实现模块化
响应式系统	使用 Vue 3 的响应式系统，性能更高	使用 Vue 2 的响应式系统，性能稍逊
插件生态	由于是 Vue 官方推荐，插件逐步增多	插件生态成熟，支持很多功能
存储方式	store 通过 `defineStore` 生成，自动响应	store 是通过 `Vuex` 实例创建，配置较多

5. Pinia 的优势

简洁性：Pinia 的 API 简洁明了，没有 Vuex 中的繁琐配置，直接通过 defineStore 创建 store，减少了冗余代码。
类型安全：Pinia 提供了更好的 TypeScript 支持，自动类型推导，使得开发体验更加流畅，尤其在大型项目中，Pinia 的类型检查非常重要。
Composition API 集成：Pinia 和 Vue 3 的 Composition API 完美集成，使用 setup() 时非常方便地管理状态。
模块化：Pinia 支持 store 的模块化，可以根据功能进行拆分，易于维护。
性能：Pinia 使用 Vue 3 的响应式系统，性能更优。

Vuex 的 `mutations` 与 Pinia 的设计差异

在 Vuex 中，mutations 是修改状态（state）的唯一方式。它被设计成同步的函数，负责直接修改 Vuex store 中的 state。这种做法有两个主要原因：

明确的状态修改轨迹：所有的状态变更都需要通过 mutations，这样就能更清晰地跟踪状态变更，帮助开发者理解状态是如何变化的。
调试和开发工具的支持：Vuex 提供了完善的开发工具支持，mutations 的存在使得工具能够记录每次状态变更，帮助进行历史追踪和时间旅行调试（Time Travel Debugging）。

而 Pinia 的设计没有 mutations，它允许直接在 actions 中修改状态，简化了代码结构并提升了灵活性。以下是两者的比较及其优缺点。

为什么 Vuex 需要 `mutations`？

清晰的状态变更追踪：
- 在 Vuex 中，所有对状态的修改都必须通过 mutations，因此你可以很容易地追踪到哪个 mutation 引起了状态的变化。
- 这有助于调试和跟踪问题，尤其是当应用规模庞大时。
同步操作：
- mutations 是同步执行的，这意味着它们是可以预测的（没有异步操作干扰）。这一点对于状态管理和调试来说是非常重要的。
开发者工具支持：
- Vuex 提供了强大的 Vue Devtools 支持，能够记录每次 mutation 触发的状态变更，并支持时间旅行调试，这使得开发和调试更加容易。

Pinia 为什么不需要 `mutations`？

简化 API 设计：
- Pinia 摒弃了 mutations，采用了更简洁的 API，允许在 actions 中直接修改状态。
- 这使得代码更直观，减少了冗余的层级，尤其对于中小型项目来说，能大幅度简化代码。
灵活的状态修改：
- 在 Pinia 中，actions 不仅可以处理异步逻辑，还能直接修改状态。你不需要再区分异步操作和同步操作，因为它们都可以在同一个地方处理。
- 这种设计简化了状态管理，不需要显式地创建额外的 mutations 来处理同步操作。
更符合 Vue 3 Composition API：
- Pinia 作为 Vue 3 的状态管理库，与 Composition API 设计模式紧密结合。Pinia 的 API 与 Vue 3 的设计理念一致，它直接支持响应式数据管理，并让你能够更方便地通过 store 的 state 和 actions 来操作数据。
- Pinia 的 API 更符合 Vue 3 的函数式编程范式，使用起来更简洁和灵活。
- Vuex 的 mutations 提供了清晰的状态变更跟踪，适用于大型应用中对状态变化需要详细审计的情况。Vuex 的设计使得状态变更更加可预测和易于调试，特别是在复杂应用中，这一点非常重要。
- Pinia 的简化设计摒弃了 mutations，让代码更加简洁和灵活。对于小型和中型应用来说，Pinia 提供了一个更轻量级的解决方案，避免了冗余代码。
- Vuex：由于 mutations 的存在，Vuex 在设计上有一定的学习曲线，特别是当项目的状态变得复杂时，可能会导致多余的代码和样板代码（如重复的 mutations 和 actions）。但是，它的优势在于提供了明确的状态修改规范，适用于大型项目或需要严格控制状态的应用。
- Pinia：通过移除 mutations，Pinia 的 API 更加简洁，减少了开发者需要编写的代码量，适用于更简单的状态管理场景。它使得开发者能够更轻松地使用 Vue 3 Composition API，特别是对于较小或中等规模的项目。
- Vuex：在 Vuex 中，所有异步操作都必须在 actions 中进行，而 mutations 只能进行同步操作。这意味着你需要清楚区分异步和同步的操作，这可能增加一些复杂度。
- Pinia：在 Pinia 中，actions 可以同时处理同步和异步操作，不需要区分 mutations 和 actions。这为开发者提供了更大的灵活性和便利性。
- Vuex：Vuex 的设计本身会引入一些额外的性能开销，特别是在大规模项目中，mutations 和 getters 的结构可能会导致性能下降，尤其是当 store 中的状态变得复杂时。
- Pinia：Pinia 基于 Vue 3 的响应式系统，设计上更轻量，性能更优。它利用 Vue 3 Composition API 的响应式机制，性能开销较低。
- Vuex：Vuex 也支持 TypeScript，但需要额外的配置，并且在大型项目中，使用 Vuex 可能会遇到一些类型推导不够智能或冗长的情况。
- Pinia：Pinia 提供了更好的 TypeScript 支持，类型推导更加智能，适合现代 TypeScript 项目的开发需求。

Vuex 的 mutations 适用于大型项目，它提供了更加严格和明确的状态管理方式，能清晰地跟踪和调试状态的变更，尤其在复杂应用中，提供了更加规范和安全的管理。
Pinia 的设计更加简洁，摒弃了 mutations，适合较小和中等规模的项目。它提供了更高的灵活性和易用性，尤其是在与 Vue 3 Composition API 配合使用时，简化了代码的书写。

如果你正在开发一个复杂的、需要严格控制状态管理的大型项目，Vuex 可能会更适合。如果你的项目相对较小，或者是使用 Vue 3 的 Composition API，Pinia 将是一个更轻量、更现代的选择。

持久化存储

正常情况下，不刷新浏览器时，store 中的状态和路由会保持不变：

路由变化：在前端路由（例如 Vue Router 或 React Router）中，路由的变化是由前端 JavaScript 控制的，不会引起页面的重新加载。所以，路由状态和应用的其他状态（如 store 中的数据）会在应用的生命周期内保持不变，直到你主动更改它们。
store 状态：在不刷新浏览器的情况下，Pinia 或 Vuex 中的状态会保持不变，组件之间可以共享这个状态，直到你显式地改变它。例如，用户的输入、请求返回的数据、选择的模板等状态都会保留。
刷新浏览器时，store 中的状态会丢失：
浏览器刷新：当你刷新浏览器时，浏览器会重新加载整个页面，这意味着 JavaScript 的运行环境也会被重新初始化。此时，所有的前端状态（如 store 中的数据）都会被重置，因为它们是保存在内存中的，而浏览器刷新时内存会被清空。
路由变化：路由也会重置，因为路由是基于当前页面状态的。刷新页面相当于重新加载整个应用，浏览器会将 URL 设置为默认的路由（通常是首页），并根据这个 URL 初始化路由状态。

为了避免刷新浏览器后丢失状态，可以使用持久化存储（如 localStorage 或 sessionStorage），将重要的状态保存到浏览器的存储中。这样，在刷新页面后，应用可以从持久化存储中恢复之前的状态。pinia-plugin-persistedstate

可以配置 persist: true 来启用持久化:

import { defineStore } from 'pinia';

export const useStore = defineStore('store', {
  state: () => ({
    count: 0
  }),
  persist: true  // 启用持久化

//或者
  persist: {
    storage: sessionStorage  // 默认是 localStorage
  }
});

在 main.js 或 main.ts 中启用插件：

import { createPinia } from 'pinia'
import persistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persistedstate)  // 启用持久化插件

app.use(pinia)