Vuex的原理,什么是vuex?你如何理解vuex?

1、背景：Vuex 是为Vue提供的一种状态管理机制。
2、Actions 执行异步操作如调用后台api 然后dispatch actions 方法 再commit mutations 再对state 进行修改
3、Mutataions 执行的是同步的操作。可以直接使用改变state
4、state 作为状态，改变后会直接作用到View上TOC](这里写自定义目录标题)

主要知识点

Vuex 状态管理机制的使用
Vue.js 的基础 api
Vue-cli 脚手架的安装及使用
vur-router 的使用
ES6 的语法，这里推荐看下碧蓝的唇膏的入门教程
Vuex 概述
在我们迫不及待的开始项目之前，我们最好先花几分钟来了解下 Vuex 的核心概念。

Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。它借鉴了 Flux 和 Redux 的设计思想，但简化了概念，并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。

state 这样概念初次接触的时候可能会感觉到有点模糊，简单来说就是将 state 看成我们项目中使用的数据的集合。然后，Vuex 使得 组件本地状态（component local state）和 应用层级状态(application state) 有了一定的差异。

component local state：该状态表示仅仅在组件内部使用的状态，有点类似通过配置选项传入 Vue 组件内部的意思。
application level state：应用层级状态，表示同时被多个组件共享的状态层级。
假设有这样一个场景：我们有一个父组件，同时包含两个子组件。父组件可以很容易的通过使用 props 属性来向子组件传递数据。

但是问题来了，当我们的两个子组件如何和对方互相通信的？ 或者子组件如何传递数据给他父组件的？在我们的项目很小的时候，这个两个问题都不会太难，因为我们可以通过事件派发和监听来完成父组件和子组件的通信。

然而，随着我们项目的增长：

1、保持对所有的事件追踪将变得很困难。到底哪个事件是哪个组件派发的，哪个组件该监听哪个事件？
2、项目逻辑分散在各个组件当中，很容易导致逻辑的混乱，不利于我们项目的维护。
3、父组件将变得和子组件耦合越来越严重，因为它需要明确的派发和监听子组件的某些事件。
这就是 Vuex 用来解决的问题。 Vuex 的四个核心概念分别是：

The state tree：Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
Getters：用来从 store 获取 Vue 组件数据。
Mutators：事件处理器用来驱动状态的变化。
Actions：可以给组件使用的函数，以此用来驱动事件处理器 mutations

简单解释下：

Vuex 规定，属于应用层级的状态只能通过 Mutation 中的方法来修改，而派发 Mutation 中的事件只能通过 action。

从左到又，从组件出发，组件中调用 action，在 action 这一层级我们可以和后台数据交互，比如获取初始化的数据源，或者中间数据的过滤等。然后在 action 中去派发 Mutation。Mutation 去触发状态的改变，状态的改变，将触发视图的更新。

注意事项

数据流都是单向的
组件能够调用 action
action 用来派发 Mutation
只有 mutation 可以改变状态
store 是响应式的，无论 state 什么时候更新，组件都将同步更新

自我理解

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式；集中存储和管理应用的所有组件状态。

理解：以上这4个词是我们理解的关键。状态：什么是状态，我们可以通俗的理解为数据。Vue只关心视图层，那么视图的状态如何来确定？我们知道是通过数据驱动，这里的状态管理可以简单理解为管理数据。集中存储：Vue只关心视图，那么我们需要一个仓库（Store）来存储数据，而且是所有的数据集中存储，视图和数据就可以分析。管理：除了存储，还可以管理数据，也就是计算、处理数据。所有组件状态：所用的组件共用一个仓库（Store），也就是一个项目只有一个数据源（区分模块modules）。

总结：Vuex就是在一个项目中，提供唯一的管理数据源的仓库。

2.有什么用？使用场景？

场景一：处理多组件依赖于同一个数据，例如有柱状图和条形图两个组件都是展示的同一数据；

场景二： 一个组件的行为——改变数据——影响另一个组件的视图，其实也就是公用依赖的数据；

Vuex将组件公用数据抽离，在一个公共仓库管理，使得各个组件容易获取（getter）数据，也容易设置数据（setter）。

3.源码初览

这是Vuex的源码文件，总共包含五大部分，Plugins两个注入文件，核心文件index，帮组文档helper，工具文件util.js

我们先看看Index.js文件export的框架，后面具体分析。

1
2
3
4
5
6
7
8
export default {
Store,
install,
mapState,
mapMutations,
mapGetters,
mapActions
}