Vue 状态管理库相关收录

Vue 状态管理库相关收录

本文档总结了当前主流 Vue 状态管理库的核心特性、优缺点及使用模式，方便快速查阅和选型。

---

概览与选型指南

快速选型矩阵

库名	核心思想	适用场景
Pinia 🌟	极简 Store，Composition API	Vue 3 项目、追求开发效率
Vuex	严格单向数据流	大型复杂应用、强状态追踪
Composition API	逻辑复用与响应式	中小型项目、逻辑复用
Provide/Inject	跨层级数据传递	低频更新的全局状态

选型考虑因素

1. 项目规模

   • 小型项目：Composition API、Provide/Inject
   • 中大型项目：Pinia、Vuex

2. Vue 版本

   • Vue 2：Vuex
   • Vue 3：Pinia（官方推荐）

3. TypeScript 需求

   • 高要求：Pinia、Composition API
   • 一般要求：Vuex

4. 团队熟悉度

   • 熟悉 Vuex：可继续使用 Vuex 或迁移到 Pinia
   • 新团队：直接学习 Pinia

5. 状态复杂度

   • 简单状态：Composition API
   • 复杂状态：Pinia、Vuex

---

Pinia

核心特性

• ✅ Vue 3 官方推荐的状态管理库
• ✅ 极简 API，学习成本低
• ✅ 完美的 TypeScript 支持
• ✅ 无 mutations，只有 state/getters/actions
• ✅ 支持 Composition API 和 Options API
• ✅ 模块化设计，每个 Store 独立
• ✅ 支持热更新
• ✅ Vue DevTools 集成

基本用法

// stores/counter.js
import { defineStore } from "pinia";export const useCounterStore = defineStore("counter", {// 状态state: () => ({count: 0,name: "Eduardo",}),// 计算属性getters: {doubleCount: (state) => state.count * 2,doublePlusOne(): number {return this.doubleCount + 1;},},// 操作方法（支持同步/异步）actions: {increment() {this.count++;},async incrementAsync() {// 异步操作const response = await fetch("/api/increment");this.count += await response.json();},reset() {this.count = 0;},},
});

在组件中引用

<!-- 在组件中使用 -->
<template><div><p>{{ counter.count }}</p><p>Double: {{ counter.doubleCount }}</p><button @click="counter.increment()">+</button></div>
</template><script setup>import { useCounterStore } from "@/stores/counter";const counter = useCounterStore();
</script>

Vuex

Vuex 基于 state, mutations, actions, getters 这几个核心概念，提供了严格的状态管理流程.

// store/index.js
import { createStore } from "vuex";export default createStore({state: {count: 0,},mutations: {// 同步修改状态increment(state) {state.count++;},},actions: {// 处理异步操作incrementAsync({ commit }) {setTimeout(() => {commit("increment");}, 1000);},},getters: {// 派生状态doubleCount(state) {return state.count * 2;},},
});

vue 组件中使用

<!-- 在组件中使用 -->
<template><div><p>{{ count }}</p><p>Double: {{ doubleCount }}</p><button @click="increment">+1</button><button @click="incrementAsync">+1 Async</button></div>
</template><script setup>import { computed } from "vue";import { useStore } from "vuex";const store = useStore();const count = computed(() => store.state.count);const doubleCount = computed(() => store.getters.doubleCount);const increment = () => store.commit("increment");const incrementAsync = () => store.dispatch("incrementAsync");
</script>

Composition API (内置)

使用 Vue 内置的 reactive 和 ref 等 API 创建可复用的状态逻辑

// composables/useCounter.js
import { ref, computed } from "vue";export function useCounter() {const count = ref(0);const double = computed(() => count.value * 2);const increment = () => {count.value++;};return {count,double,increment,};
}

vue 组件中使用

<!-- 在组件中使用 -->
<template><div><p>{{ count }}</p><p>Double: {{ double }}</p><button @click="increment">+</button></div>
</template><script setup>import { useCounter } from "./composables/useCounter";const { count, double, increment } = useCounter();
</script>