Vuex 与 Pinia:Vue 状态管理库的选择与对比

ops/2024/11/14 14:29:41/

1. Vuex 与 Pinia 概述

Vuex

Vuex 是 Vue 官方的状态管理库,首次发布于 Vue 2.x,专门为 Vue 应用设计的全局状态管理工具。Vuex 将所有的状态放在一个全局 store 中,组件通过分发(dispatch)动作(actions)来修改状态,并且 Vuex 使用严格的规则来确保状态的变更是可追踪和可调试的。

Pinia

Pinia 是 Vue 3 的官方状态管理库,它是 Vuex 的继任者,利用 Vue 3 的新特性(如 Composition API 和 Proxy)提供了更简洁、更现代化的 API。Pinia 由 Vue 团队官方开发和维护,目的是改善 Vuex 的一些痛点,使得状态管理更加轻量和灵活。

2. 核心对比

特性VuexPinia
Vue 版本支持 Vue 2 和 Vue 3仅支持 Vue 3
API 设计基于 Vuex store + mutations + actions基于 Composition API,使用 defineStore 定义 store
模块化支持模块化(namespace)支持模块化,但更加灵活简洁
响应式使用 Vue 的 reactivity API,但较复杂完全基于 Vue 3 的 Proxy 实现,响应式更简单
开发体验严格的状态变更规则(mutation)更直观的 API,支持开发者更自由地组织状态
插件与扩展有多种插件支持,但需要配置内建支持插件,并且更容易集成扩展
热重载支持热重载,但在大项目中性能较差热重载更加快速和流畅
状态持久化支持插件,开发者手动配置支持更容易的持久化插件支持
学习曲线需要学习 mutations, actions 和 getters更简单,基本靠 Composition API

3. Vuex 与 Pinia 的优势与劣势

Vuex 优势
  • 成熟稳定:作为 Vue 的官方状态管理库,Vuex 已经经过多年的实践检验,广泛应用于许多大型项目中。
  • 社区支持:Vuex 拥有强大的社区支持和丰富的文档。
  • Vue 2 支持:如果你正在开发 Vue 2 项目,Vuex 是首选。
Vuex 劣势
  • 较复杂的 API:Vuex 使用 mutation 来管理状态变更,这会增加一些冗余代码,尤其是在大型应用中,管理复杂的状态变得较为困难。
  • 不适配 Vue 3 的 Composition API:尽管 Vuex 支持 Vue 3,但它并不是为 Composition API 设计的,导致使用上不如 Pinia 灵活。
Pinia 优势
  • 更简洁的 API:Pinia 基于 Vue 3 的 Composition API,使得状态管理的代码更加简洁,易于理解。
  • 响应式更好:Pinia 完全基于 Vue 3 的 Proxy 实现,自动追踪状态依赖,响应式更强大。
  • 与 Vue 3 无缝集成:Pinia 是为 Vue 3 设计的,与 Vue 3 的新特性(如 Composition API 和 Suspense)更好地兼容。
  • 自动类型推导:在 TypeScript 环境下,Pinia 提供了开箱即用的类型推导,减少了配置和手动类型声明的工作量。
Pinia 劣势
  • 不支持 Vue 2:Pinia 仅支持 Vue 3,因此,如果你的项目是基于 Vue 2 的,Pinia 无法使用。
  • 较新,社区和生态还在成长:虽然 Pinia 已经被 Vue 团队推荐为官方状态管理库,但相比 Vuex,Pinia 仍然较新,部分工具和插件可能还不够完善。

 4.主要区别代码示例

① API 风格

Vuex 的 API 比较冗长,尤其是对于 Vue 3 的开发者,使用 Vuex 时常常需要手动管理 mutationsactions 等逻辑。而 Pinia 基于 Vue 3 的 Composition API,API 更加简洁和直观。

Vuex 示例:

javascript">// store.js (Vuex)
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}}
});export default store;

Pinia 示例:

javascript">// store.js (Pinia)
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;},incrementAsync() {setTimeout(() => {this.increment();}, 1000);}}
});
② 响应式设计

Vuex 使用的是 Vue 2 的响应式系统,在 Vue 3 中仍然有效,但在 Vue 3 中,Pinia 基于 Vue 3 的响应式 API(reactiveref)设计,状态管理更加简洁和符合 Vue 3 的最佳实践。

Vuex 响应式:

在 Vuex 中,状态是响应式的,但你必须依赖 Vuex 的方法来获取状态。

javascript">const store = new Vuex.Store({state: {count: 0}
});// 在组件中访问状态
this.$store.state.count

Pinia 响应式:

在 Pinia 中,状态本身就是响应式的,你可以直接在组件中使用。

javascript">import { useCounterStore } from './store';const counter = useCounterStore();
console.log(counter.count);  // 自动响应式更新
③ 模块化(Stores)

Vuex 使用模块化时需要额外配置,每个模块都有自己的 statemutationsactions。而 Pinia 的模块化更加简洁,每个 store 本身就是一个模块,且不需要额外的配置。

Vuex 模块化示例:

javascript">const store = new Vuex.Store({modules: {counter: {state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}}}}
});

Pinia 模块化示例:

Pinia 的 store 设计本身就是模块化的,所有的 store 都是独立的。

javascript">// counterStore.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;},incrementAsync() {setTimeout(() => {this.increment();}, 1000);}}
});
④ 插件与开发工具

Vuex 提供了一个强大的插件系统,支持 Vue DevTools 进行调试,但需要手动安装插件支持。Pinia 自带集成的开发工具,无需额外配置,且内置支持状态持久化和调试功能。

Vuex 开发工具配置:

javascript">// store.js (Vuex) 使用 Vue DevTools
const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}}
});// 在浏览器控制台启用 Vue DevTools

Pinia 开发工具:

Pinia 自动集成开发工具,无需额外配置。

javascript">import { createPinia } from 'pinia';const pinia = createPinia();
app.use(pinia);
⑤ 异步操作

Vuex 和 Pinia 都支持异步操作,但在 Vuex 中需要通过 actions 来处理异步任务,并显式地提交 mutations 来修改状态。而 Pinia 则通过 actions 可以直接修改状态,省去了提交 mutations 的步骤。

Vuex 异步操作:

javascript">// Vuex 异步操作
actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}
}

Pinia 异步操作:

javascript">// Pinia 异步操作
actions: {async incrementAsync() {await new Promise(resolve => setTimeout(resolve, 1000));this.increment();}
}

5. 适用场景

  • 使用 Vuex 的场景

    • 如果你还在使用 Vue 2,Vuex 是唯一的选择。
    • 你需要一个稳定、经过时间考验的库,且对复杂的状态管理和多模块支持有需求。
    • 需要在一个庞大的、需要多开发者协作的项目中使用。
  • 使用 Pinia 的场景

    • 如果你正在开发基于 Vue 3 的新项目,Pinia 是最优选择。
    • 如果你希望使用 Vue 3 的 Composition API 并享受更简单的状态管理方案。
    • 如果你倾向于使用更现代、简洁的状态管理解决方案,同时需要更好的类型支持和开发体验。

http://www.ppmy.cn/ops/133588.html

相关文章

动手学深度学习69 BERT预训练

1. BERT 3亿参数 30亿个词 在输入和loss上有创新 两个句子拼起来放到encoder–句子对 cls-class分类 sep-seperate 分隔符 分开每个句子 告诉是哪个句子 两个句子给不同的向量 位置编码不用sin cos, 让网络自己学习 bert–通用任务 encoder 是双向的,…

用Java实现samza转换成flink

将Apache Samza作业迁移到Apache Flink作业是一个复杂的任务,因为这两个流处理框架有不同的API和架构。然而,我们可以将Samza作业的核心逻辑迁移到Flink,并尽量保持功能一致。 假设我们有一个简单的Samza作业,它从Kafka读取数据&…

计算机网络之表示层

一、定义与概述 在计算机网络中,OSI(Open Systems Interconnection)模型是一种广泛接受的分层模型,用于描述网络通信的各个方面。这个模型将网络通信划分为七个不同的层次,每一层都负责特定的任务,以确保数…

Cesium中3Dtiles模型的信息读取和高亮显示单独瓦片

一、信息读取 参考官方文档:Csium3DTileset - Cesium Documentation 加载模型 var tileset viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: tileset.json//加载3D Tiles}));在使用过程中可以通过在控制台输出对象后看一下对象的类型然后上官方文…

英语中go do sth和come do sth的区别

1. "Come do something" 语法结构 结构:主语 come 动词原形 其他成分。用法:表示某人来到说话者的位置或某个地方,然后做某事。 例句 Come play with us.(过来和我们一起玩。)Come help me with this…

github高分项目 WGCLOUD - 运维实时管理工具

GitHub - tianshiyeben/wgcloud: Linux运维监控工具,支持系统硬件信息,内存,CPU,温度,磁盘空间及IO,硬盘smart,GPU,防火墙,网络流量速率等监控,服务接口监测&…

Prettier - Code formatter插件使用(前端美化插件)

一,安装 vscode直接搜索 安装完毕后 二,配置 Prettier: 安装完插件后,打开 VSCode 的设置(快捷键是 Ctrl ,)。在搜索框中输入 Format On Save,找到并勾选“Editor: Format On Save”选项&am…

11. 盛最多水的容器

目录 题目过程 题目 过程 class Solution { public:int maxArea(vector<int>& height) {int l0,rheight.size()-1;int v0;//用于存储容器最大值while(l<r){if(height[l]<height[r]){vmax(v,height[l]*(r-l));}else{vmax(v,height[r]*(r-l));}}return v;} };用…