Vuex介绍&同步取值&异步问题

前言：我们在之前就有了子类与父类之间的传参，又有利用总线进行传参，但两者都有一定的弊端。如：总线定义组件太多容易混淆等；所以接下来我们会利用VueX进行参数传。

 

---

目录

一：VueX简介

二：VueX各个js文件的作用

三、利用vuex同步存值

四、利用vuex取值

五、Vuex的异步加载问题

---

一：VueX简介

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），
   让其在各个页面上实现数据的共享包括状态，并且可操作
   
   Vuex分成五个部分： 
   1.State：单一状态树
   2.Getters：状态获取
   3.Mutations：触发同步事件
   4.Actions：提交mutation，可以包含异步操作
   5.Module：将vuex进行分模块

二：VueX各个js文件的作用

关系图（四个js文件的关系）：

官方关系图：

1.State：单一状态树用一个对象就包含了全部的应用层级状态；每个应用将仅仅包含一个 store 实例

 2.Getters：状态获取(可以认为是store的计算属性)，在组件中的computed中引入

                             getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

                             Getter 接受 state 作为其第一个参数，也可以接受其他 getter 作为第二个参数

 3.Mutations：

                      3.1触发同步事件更改 Vuex 中 store 的状态的唯一方法是commit mutation;

                      3.2mutation类似于事件，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)；

                                3.3回调函数对状态进行更改， state 作为第一个参数

  4.Actions：提交mutation，可以包含异步操作

   4.1Action提交的是mutation，而不是直接变更状态

   4.2.Action可以包含任意异步操作

   4.3.Action的回调函数接收一个 context 上下文参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性

  5.store

每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

三、利用vuex同步存值

前提：在进行vuex的操作时，必须要将Vuex的配置给安装好：

          1、安装（将以下命名在项目的cmd窗口中运行）

        npm install vuex -S