Vue 3.0 篇 7：告别 Vuex，拥抱轻量级状态管理神器 Pinia

2023-11-12 18:21:06

序言：Vuex 的进化

Vuex 是 Vue 生态系统中备受推崇的状态管理库。然而，随着 Vue 3.0 的发布，社区开始寻求一种更轻量、更灵活的替代方案。Pinia 应运而生，它吸收了 Vuex 的核心原则，同时摒弃了其一些复杂性。

Pinia 的优势

极简 API： Pinia 拥有一个简洁的 API，只需几个方法即可实现状态管理。这使得入门变得容易，并减少了学习曲线。
响应式状态树： Pinia 管理一个响应式状态树，与 Vue 的响应式系统无缝集成。这使得你可以轻松地跟踪状态变化并自动更新 UI。
组合式 API： Pinia 采用组合式 API，允许你以模块化和可重用的方式创建状态逻辑。这提高了代码的可维护性和可测试性。
轻量级： 与 Vuex 相比，Pinia 非常轻量，它只包含核心功能，而不会引入额外的开销。这使得它成为小型和中型应用的理想选择。

Pinia 的工作原理

Pinia 的核心是一个响应式状态树，它存储着应用的状态。你可以通过使用 defineStore 函数来定义存储，该函数接受一个工厂函数，该函数返回存储的初始状态和方法。

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    email: '',
  }),
  getters: {
    fullName: (state) => `${state.name} ${state.email}`,
  },
  actions: {
    setName(name) {
      this.name = name
    },
    setEmail(email) {
      this.email = email
    },
  },
})

Pinia vs. Vuex

以下是 Pinia 和 Vuex 之间的关键区别：