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 来处理复杂的状态逻辑、数据流和副作用。
Pinia 与 Vuex 相比，具有更简便的 API、更好的 TypeScript 支持、更强的模块化和灵活性。下面是对 Pinia 的具体解读，包罗其核心概念、如何使用以及它的一些优势。
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')
- 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
- }
- })
- 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>
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
- }
- }
- })
- import { useUserStore } from './stores/user'
- const user = useUserStore()
- console.log(user.name) // 'John Doe'
- user.updateName('Jane Doe')
特性PiniaVuex支持 Vue 3原生支持，专为 Vue 3 设计也支持 Vue 3，但必要额外的配置和适配API 简便使用 defineStore 定义 store，简便明确必要 state、mutations、actions、gettersTypeScript 支持原生支持 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)
|
