这是我参与「第四届青训营」笔记创作活动的第4天。

前言

在讲Vue的状态管理之前，我们要强调，Vue框架本身就是具有状态管理的能力的，比如我们在开发Vue应用页面时，视图上渲染的数据就是通过状态来驱动的。

本次笔记主要讨论基于Vue的状态管理框架Vuex，这是一个专为Vue定制的状态管理模块，它集中式的存储和管理应用的所有组件的状态，使这些状态数据可以按照我们预期的方式变化。

当然，不是所有的Vue应用的开发都需要使用Vuex来进行状态管理。对于小型的简单的Vue应用，使用Vue自身的状态管理功能完全就足够了。

初始Vuex框架

Vuex采用集中的方式管理所有组件的状态。相较于“集中式”而言，Vue本身对状态的管理是“独立式”的，也就是说，每个组件只负责维护自身的状态。

在Vue应用中，组件状态的管理由如下几个部分组成：

状态数据是指data函数中返回的数据，这些数据自带响应性，由其来对视图的展现进行驱动。

视图是指template里面定义的视图模板，其通过声明的方式将状态映射到视图上。

动作是指会引起状态变化的行为。

上面三部分的协同工作就是Vue状态管理的核心。总体来看，在该状态管理模式中，数据的流向是单向的、私有的。由视图触发动作，由动作改变状态，由状态驱动视图。

单向数据流是一种非常简洁的状态管理模式，对于组件不多的简单Vue应用来说是非常高效的。

然而在多组件复杂交互的场景，上述方式就会比较困难。Vuex就是基于该场景提出的。在Vuex中，可以将需要组件间共享的状态抽取出来，以一个全局的单例模式进行管理。这样的话，视图无论在视图树中的哪个位置，都可以直接获取这些共享的状态，或者直接触发修改动作修改这些状态。