Vue初学（四）

Promise

Promise是一种异步编程的解决方案，使回调更容易维护，更加优雅，避免了回调地狱，下面是一种最简单的例子，resolve会执行then，reject会执行catch，注意Promise要大写

pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。

fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()

reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

Promise的链式调用,简写在右边

 

异步请求的时候，有时候会有请求并发，当多个请求都完成后执行某个操作，可以使用Promise.all，注意all后面的then，拿到的结果是数组

Vuex状态管理示意图

Vuex就是一个集中式的状态管理模式，当多个页面都需要使用的时候，将这个状态放到Vuex中，按照既定的规则来修改里面存储的状态

vuex的核心概念有：State、Getters、Mutations、actions、modules

mutations响应规则：

state中定义的状态会加到响应式系统中，当数据发生改变时，会重新渲染用到该状态的页面，

响应式规则：

• 提前在store中初始化好需要的属性
• 当给state中的对象添加新属性时，使用下面的方式：
  – 使用Vue.set（obj, ‘new prop name’, ‘value’ ）; Vue.delete（obj, ‘prop name’）
  – 用新对象给旧对象重新赋值

state

类似于vue实例里面的data属性，用来定义一下属性，但是这块称作为状态，在一个仓库中定义很多状态，多个页面都可以对他进行调用和修改等，相当于统一管理

getters

取出一些state的变异属性，类似于获取状态的平方值，获取状态筛选后的值（年龄大于20的学生）等

定义方法的时候，会有一个state参数，可以直接获取state中定义的状态值，还有getters参数可以用来调用getters中的方法

mutations

修改state状态的唯一方法，只支持同步方法，参数有state，payload（可以是对象，例如payload.age,payload.name）

可以在store文件夹下建一个mutation-types.js文件，来记录方法名，弄成常亮，这样调用的时候和方法名可以保证一致

actions

mutations中不能有异步操作，所有的异步操作卸载actions中就可以，action中再去commit，调用mutations中的方法，页面调用actions中的方法时使用dispatch

modules

Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理,当应用变得非常复杂时,store对象就有可能变得相当臃肿,为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等

调用state属性时候，$store.state.a.name

getters中的参数有变化，state getters rootState

总体来说，流程就是这样的，将状态定义到vuex中，取的时候直接通过$store取就可以了，getters中的东西也是直接调用就行，mutations中的东西通过commit来调用，传过去type，也就是方法名，因为要提交给仓库去修改状态，actions是通过dispatch来调用，而actions中的异步操作，也是在调用mutations中定义的方法，modules中的内容，只有取state的时候有变化，其他的变化不大，还有就是获取根来做各种操作，现在回过头看官方提供的vuex流程图就会有更好的理解了

index.js文件内容越来越多，需要进行抽离，最后的目录格式是

axios

拦截器记得要return，一般不使用全局的axios，都是创建实例，为了减少对第三方框架的依赖，会对第三方框架进行封装