ES6及Vuex相关知识点

1. ES5之前因为 if 和 for 都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题。
   以下案例，如果for循环里用var声明i，打印结果会一直是“第5个按钮被点击”
   const ：使用const修饰的标识符为常量，一旦const修饰的标识符被赋值之后，不能修改
   const修饰的标识符必须赋初始值；
   常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。
   在ES6开发中优先使用const，只有需要改变 某一个标志符的时候才使用let。
   
   2、箭头函数中的this：
   — 三种定义函数的方式：* 定义函数的方式 function；
   * 对象字面量中定义函数；
   * ES6中的箭头函数；
   
   — 箭头函数的参数和返回值：
   
   — 箭头函数中的this： * 箭头函数中的this：向外层作用域中，一层层查找this，直到有this的定义；
   * 定义这个函数的父级作用域中的this;
   * 箭头函数里this对象是静态的，指向的是定义时所在的对象，function指向的是使用时所在的对象。
   
   Promise 的介绍和基本使用：
   - Promise 是异步编程的一种解决方案；一种更加优雅的异步处理方案，将网络请求代码和处理代码分离（.then()函数）
   - 什么情况下会用到 Promise？
   * 一般情况下是有异步操作时；
   *
   - 那么什么时候我们会来处理异步事件呢？
   * 一种很常见的场景就是网络请求；
   * 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能简单的将结果返回；
   * 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去；
   * 如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦；
   * 但是，当网络请求非常复杂时，就会出现回调地狱；
   

Promise 三种状态：
- 首先，当我们开发中有异步操作时，就可以给异步操作包装一个Promise；
- 异步操作之后会有三种状态：
* pending ：等待状态，比如正在进行网络请求，或者定时器没有到时间；
* fulfill ：满足状态，当我们主动回调了 resolve 时，就处于该状态，并且会回调 .then()；
* reject：拒绝状态，当我们主动回调了 reject 时，就处于该状态，并且会回调 .catch()；

Promise 的另外处理形式：
Promise 链式调用及其简写：
- 我们在看Promise的流程图时，发现无论是 then 还是 catch 都可以返回一个Promise对象；
- 所以，我们的代码其实是可以进行链式调用的；
- 这里我们直接通过Promise包装了一下新的数据，将Promise对象返回了；
* Promise.resolve() 将数据包装成Promise对象，并且在内部回调 resolve() 函数；
* Promise.reject() 将数据包装成Promise对象，并且在内部回调reject() 函数；




手动抛出异常：

Promise 的 all 方法使用：

类的相关知识：

// 创建一个Person类
        class Person {
            constructor(name, age) {
                // 构造器中的this是谁？--- 类的实例对象
                this.name = name
                this.age = age
            }
            // 一般方法
            speak() {
                // speak方法放在了哪里？--类的原型对象上，供实例使用
                // 通过Person实例调用speak时，speak中的this就是Person实例
                console.log(`我叫${this.name},我的年龄是${this.age}`);
            }
        }
        // 创建一个Person类的实例对象
        const p1 = new Person('tom', 12)
        const p2 = new Person('jerry', 14)

        console.log(p1); //输出的是一个实例对象
        console.log(p2);
        p1.speak()
        p2.speak()
         // 创建一个Student类，继承于Person类
        class Student extends Person {
            constructor(name, age, grade) {
                super(name, age)
                this.grade = grade
            }
            // 重写从父类继承过来的方法
            speak() {
                console.log(`我叫${this.name},我的年龄是${this.age},我读的是${this.grade}年级`);
            }
            study() {
                console.log(`我很努力的学习`);
            }
        }
        const s1 = new Student('小张', 13, '高一')
        console.log(s1);
        s1.speak()
        s1.study()
        /*
            总结：1、类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写；
                 2、如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的；
                 3、类中所定义的方法，都是放在了类的原型对象上，供实例去使用；
        */ 

Vuex 概念和作用：
- 官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式；
- 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化；
- Vuex也集成到 Vue 官方调试工具 devtools extension ,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能；
- 状态管理到底是什么？
* 状态管理模式、集中式存储管理这些名词听起来让人捉摸不透；
* 其实，可以简单的将其看成是把需要多个组件共享的变量全部存储在一个对象里面；
* 然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用；
* 但是，有什么状态是需要我们在组件间共享的呢？ 比如用户的登录状态、用户名称、头像、地理位置、商品的收藏、购物车中的物品等等；
单界面到多界面状态管理切换：
单界面状态管理：

- State：状态，可以当做是data中的属性；
- View：视图层，可以针对 State 的变化，显示不同的信息；
- Actions：这里的 Actions 主要是用户的各种操作，如点击、输入等，会导致状态的改变；
多界面状态管理：
- 多个视图都依赖同一个状态（一个状态改了，多个界面需要进行更新）；
- 不同界面的 Actions 都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）；
- 也就是说对于某些状态（状态1/状态2/状态3）来说只属于我们某一个视图，但是也有一些状态（状态a/状态b/状态c）属于多个视图共同想要维护的；
- 状态1/状态2/状态3你放在自己的房间中，你自己管理自己用，没问题；
- 但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理；
- Vuex 就是为我们提供这个大管家的工具；
- 全局单例模式（大管家）
* 我们现在要做的就是，将共享的状态抽取出来，交给我们的大管家，统一进行管理；
* 之后，每个视图，按照规定好的规定，进行访问和修改等操作；
* 这就是Vuex背后的基本思想；
vuex-devtools 和 mutations：
- 案例：使用Vuex的counter
* 1.提取出一个公共的 store对象，用于保存在多个组件中共享的状态；
* 2.将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到；
* 3.在其他组件中使用store对象中保存的状态即可：
通过 this.$store.state.属性的方式来访问状态通过this.$store.commit(‘mutation中的方法’)来修改状态
注意事项：- 我们通过提交 mutation 的方式，而非直接改变 store.state.counter;
- 这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变 store.state.counter的值；

Vuex有5个比较核心的概念： State Getters Mutation Action Module
- State单一状态树(Single Sourse of Truth也可以翻译成单一数据源)的理解：
* 如果你的状态信息是保存到多个Store对象里的，那么之后的管理和维护等等都会变得特别困难；
* 所以，Vuex也使用了单一状态树来管理应用层级的全部状态；
* 单一状态树能够让我们用最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护；
* （修改任何 state 里的东西，都要经过 mutations）mutations 唯一的目的就是修改 state 中的状态；mutations 中的每个方法尽可能完成的事情比较单一；
- Getters 的基本使用：
* Getters类似于单个组件中的计算属性；
* 用Getters对数据进行处理，其他地方使用Getters处理过的数据；

- mutations 的携带参数：
* Vuex的store状态的更新唯一方式：提交mutation ；
* mutation 主要包括两部分：
1.字符串的事件类型（type）;
2.一个回调函数(handler)，该回调函数的第一个参数就是state；
* 在通过mutations 更新数据的时候，有可能我们希望携带一些额外的参数，参数被称为是mutations 的载荷（Payload）;
* 但是，如果参数不是一个呢？比如我们有很多参数需要传递；
* 这个时候，我们通常会以对象的形式传递，也就是 Payload 是一个对象；
* 这个时候可以再从对象中取出相关的信息；

* mutations 的提交风格：
- 上面的通过 commit 进行提交是一种普通的方式；
- Vue还提供了另外一种风格，它是一个包含type属性的对象；

* mutations 响应规则：
- Vuex的 store 中的 state 是响应式的，当 state 中的数据发生改变时，Vue组件会自动更新；
- 这就要求我们必须遵守一些 Vuex 对应的规则：
* 提前在store中初始化好所需的属性；
* 当给 state 中的对象添加新属性时，使用下面的方式：
方式一：使用 Vue.set(obj,‘newProp’,123)；
方式二：用心对象给旧对象重新赋值；

不是在store中初始化好的属性，想要让它变成响应式，可以通过下面两个方法实现：

mutations 的类型常量：
- 在mutations 中，我们定义了很多事件类型（也就是其中的方法名称）；
- 当我们的项目增大时，Vuex管理的状态越来越多，需要更新状态的情况越来越多，那么意味着mutations 中的方法越来越多；
- 方法过多，使用者需要花费大量的精力去记住这些方法，甚至是多个文件间来回切换，查看方法名称，甚至如果不是复制的时候，可能还会出现写错的情况；
- 步骤一：新建一个文件 mutations-types.js，

步骤二：在store中的 mutations 中使用常量来定义方法；

步骤三：在App.vue 文件中导入并使用常量；

mutations 同步函数：
* 通常情况下，Vuex要求我们 mutations 中的方法必须是同步方法；
* 主要的原因是，当我们使用 devtools 时，devtools 可以帮助我们捕捉 mutations 的快照；
* 但是如果是异步操作，那么 devtools 将不能很好的追踪这个操作什么时候会被完成；
* 所以，不要在 mutations 中进行异步操作；
* 但是，某些情况我们确实希望在 Vuex 中进行一些异步操作，比如网络请求，必然是异步的，这个时候怎么处理呢？
* Action 类似于 Mutations ，是用来代替 Mutations 进行异步操作的；
vuex- action 的使用详解：
-

vuex-modules 的使用：
- Module 是模块的意思，为什么在Vuex中我们要使用模块呢？
- Vue使用单一状态树，那么也意味着很多状态都会交给Vuex来管理；
- 当应用变得非常复杂时，store对象就有可能变得相当臃肿；
- 为了解决这个问题，Vuex允许我们将store分割成模块（Module），而每个模块拥有自己的state、mutations、actions、getters等
store 文件夹的目录组织：