Vue基础教程（190）状态管理之Vuex详细介绍及其安装：Vuex，启动！告别组件传值的“鸡毛信”时代，打造你的Vue中央数据帝国

一、 开篇吐槽：没有Vuex的日子，我们是怎么过来的？

各位Vue门徒，不知道你们有没有经历过这样的至暗时刻：

你正在开发一个不算小的Vue项目，比如一个电商网站。Header组件里要显示购物车商品数量，商品列表组件里点击“加入购物车”需要更新这个数量，而购物车页面本身更要展示和操作这些数据。

一开始，你可能会想：“这有啥难的？用props和$emit父子传值呗！”

于是，你的代码变成了这样：在根实例里定义 cartCount，通过 props 一层层传给 Header 和 ProductList。ProductList 里点击按钮，需要 $emit 一个事件给父组件，父组件再处理事件，修改 cartCount，然后再通过 props 层层下发……

才两三个组件，你已经感觉在写“回调地狱”了。要是组件层级再深一点呢？比如从孙组件的孙组件，想要修改根组件的数据……我的天，光是想象一下，手指就已经开始在键盘上颤抖了。这简直就是在用“鸡毛信”传递军情，翻山越岭，万一中间哪个“通信兵”（中间组件）掉链子了，整个数据流就崩了！

这种“鸡毛信”式的传值，不仅写起来麻烦，维护起来更是噩梦。数据在哪被修改的？谁还能修改它？出了问题怎么调试？—— 一团乱麻。

正是在这种水深火热之中，我们迎来了救世主：Vuex。

二、 Vuex是何方神圣？把它想象成你家的“中央大冰箱”

官方说法：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态。

说人话就是：Vuex 是你整个Vue应用的“中央大冰箱”（Single Source of Truth）。

我们来打个比方：

• 状态（State）：就是冰箱里的食物。比如牛奶、鸡蛋、蛋糕。这些是你的应用数据，比如用户信息、购物车列表、主题颜色等。
• 组件（Components）：就是你家里的家庭成员。你、你室友、你爸妈。
• 没有Vuex时：你想吃蛋糕，但你不知道蛋糕在哪。你得问你妈，你妈可能得去厨房找，然后再告诉你。这就是props传值，效率低下。
• 有Vuex时：你们家买了一个巨无霸中央冰箱（Vuex Store）。所有食物都放在这里面。任何人想吃蛋糕，都不用问别人，直接去冰箱拿就行了（组件直接从Store读取状态）。任何人买了新食物，也都直接放进冰箱（组件直接修改Store中的状态）。

这样一来，沟通成本大大降低，所有家庭成员对食物的状态了如指掌，生活变得无比和谐。

三、 拆解Vuex的核心概念：冰箱的管理手册

光有冰箱还不行，得有一套管理规则，不然会乱套。Vuex的核心就是这五大将：

1. State（状态/数据）：就是冰箱里实际存放的食物本身。这是你唯一的数据源。

// 例如
state: {
  cartCount: 0,
  userInfo: { name: '张三' },
  products: []
}

1. Getters（获取器）：可以看作是冰箱的智能标签