Vue 状态管理库相关收录

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

概览与选型指南

快速选型矩阵

选型考虑因素

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>