如何从头开始学习Vuex，从零基础到精通？

本文共计2303个文字，预计阅读时间需要10分钟。

一、前言：当我们的应用遇到多个组件共享状态时，会需要多个组件依赖于同一状态。或来自不同视图的行为需要变更同一状态。

以前的处理方法：将数据以及操作数据的行性行为都定义为同一状态。

一、前言

当我们的应用遇到多个组件共享状态时，会需要多个组件依赖于同一状态抑或是来自不同视图的行为需要变更同一状态。以前的解决办法：

a.将数据以及操作数据的行为都定义在父组件;

b.将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)

传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时，你可能会对 vue 组件之间的通信感到崩溃 ，特别是非父子组件之间通信。此时就应该使用vuex，轻松可以搞定组件间通信问题

二、什么是Vuex

1.简要介绍Vuex原理

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

2.简要介绍各模块在流程中的主要功能：

• Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。