Vuex - Vue 状态管理 #

学习路线 #

第一阶段：基础入门 #

适合零基础开发者，学习 Vuex 的核心概念和基本语法。

第二阶段：状态管理 #

学习如何定义和管理应用状态。

第三阶段：同步修改 #

学习如何安全地修改状态。

第四阶段：异步操作 #

学习处理异步状态变更。

第五阶段：派生状态 #

学习计算属性和派生状态管理。

第六阶段：模块化 #

掌握大型应用的状态组织方式。

第七阶段：组合式API #

学习在 Vue 3 组合式 API 中使用 Vuex。

第八阶段：高级特性 #

掌握 Vuex 的高级功能。

第九阶段：最佳实践 #

学习企业级开发规范和技巧。

技术栈概览 #

text 
Vuex 技术栈
├── Vuex 4              Vue 3 状态管理
├── Vuex 3              Vue 2 状态管理
├── Vue DevTools        调试工具
└── TypeScript          类型支持（可选）

前置知识 #

学习本指南前，建议具备以下基础：

  • HTML/CSS 基础
  • JavaScript ES6+ 语法
  • Vue.js 基础知识
  • 基本的命令行操作

学习建议 #

  1. 循序渐进：按照章节顺序学习，打好基础
  2. 动手实践：每学完一章，动手编写代码
  3. 深入理解：理解单向数据流原理
  4. 项目驱动：通过实际项目巩固知识

版本说明 #

本指南同时覆盖 Vuex 3 和 Vuex 4，分别对应 Vue 2 和 Vue 3。

版本 对应 Vue 版本 状态 说明
Vuex 4.x Vue 3.x 推荐 最新版本，支持组合式 API
Vuex 3.x Vue 2.x 维护 稳定版本

Vuex vs Pinia #

特性 Vuex Pinia
学习曲线 中等 较低
代码量 较多 较少
TypeScript 需要额外配置 原生支持
模块化 需要手动配置 自动支持
调试工具 Vue DevTools Vue DevTools
官方推荐 传统项目 新项目推荐

Vuex 的核心架构 #

text 
┌──────────────────────────────────────────────────────┐
│                    Vuex 架构图                        │
├──────────────────────────────────────────────────────┤
│                                                      │
│    ┌───────────┐    dispatch    ┌───────────┐       │
│    │           │ ──────────────▶│           │       │
│    │ Component │                │  Actions  │       │
│    │           │ ◀──────────────│           │       │
│    └───────────┘    commit      └─────┬─────┘       │
│          ▲                             │             │
│          │ render                      │             │
│          │                             ▼             │
│    ┌─────┴─────┐               ┌───────────┐        │
│    │           │               │           │        │
│    │   State   │◀──────────────│ Mutations │        │
│    │           │    mutate     │           │        │
│    └───────────┘               └───────────┘        │
│          │                                           │
│          │                                           │
│          ▼                                           │
│    ┌───────────┐                                    │
│    │           │                                    │
│    │  Getters  │                                    │
│    │           │                                    │
│    └───────────┘                                    │
│                                                      │
└──────────────────────────────────────────────────────┘

快速预览 #

一个简单的计数器 Store #

javascript 
import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

在组件中使用 #

vue 
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

开始你的 Vuex 学习之旅吧！

最后更新：2026-03-28