Promise

什么时候需要使用？

一般情况下是有异步操作时，使用Promise对这个异步操作进行封装

一般情况使用1（模拟）

new Promise((resolve, reject) => {
    setTimeout(() => {
        // 成功时回调
        //resolve('成功')
        
        //失败时回调
        reject('失败')
    },1000)
    // 成功处理方法
}).then((data) => {
    console.log(data);
    // 失败处理方法
}).catch((data) => {
    console.log(data);
})

一般情况使用2（模拟）

new Promise((resolve, reject) => {
    setTimeout(() => {
        //resolve('成功')
        reject('失败')
    }, 1000)
}).then(data => {
    console.log(data);
}, err => {
    console.log(err);
})

链式调用（模拟）

new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('aaa')
        },1000)
    }).then(res => {

        console.log(res,'第一层的处理代码');
        return new Promise((resolve, reject) => {
            resolve(res + '111')
        })
    }).then(res => {

        console.log(res,'第二层的处理代码');
        return new Promise((resolve, reject) => {
            resolve(res + '222')
        })
    }).then(res => {
        console.log(res,'第三层的处理代码');
    })

链式调用（简洁写法）

new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('aaa')
        }, 1000)
    }).then(res => {
        console.log(res, '第一层的处理代码');
        // return Promise.resolve(res + '111')
        return Promise.reject('失败')
    }).then(res => {

        console.log(res, '第二层的处理代码');
    	// 模拟出错
        return Promise.resolve(res + '222')
    }).then(res => {
        console.log(res, '第三层的处理代码');
    }).catch(err => {
        console.log(err);
    })

链式调用（终极简洁写法）

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('aaa')
    }, 1000)
}).then(res => {
    console.log(res, '第一层的处理代码');
    return res + '111'
}).then(res => {

    console.log(res, '第二层的处理代码');
    return res + '222'
}).then(res => {
    console.log(res, '第三层的处理代码');
})

优雅( •̀ .̫ •́ )✧

Promise三种状态

Promise的all方法的使用

Promise.all([
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('1')
        }, 2000)
    }),
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('2')
        }, 1000)
    })
    // 拿到一个数组
]).then(results => {
    console.log(results);
})

效果

Vuex

管理状态

管理什么状态？

单界面的状态管理

多界面状态管理

Vuex状态管理图例

使用Vuex

安装

Google浏览器安装 VueDevtools 调试工具

Google插件商城下载

开发安装依赖

1	npm install vuex --save

小案例测试

src 下创建 store 文件夹下再创建index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    counter: 1000
  },
  mutations: {
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    }
  },
  actions: {},
  getters: {},
  modules: {}
})


export default store

components 文件夹下创建 HelloVuex.vue

<template>
  <div>
    <h2>{{$store.state.counter}}</h2>
  </div>
</template>

<script>
    export default {
        name: "HelloVuex"
    }
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">加</button>
    <button @click="subtraction">减</button>
    <hello-vuex></hello-vuex>
  </div>
</template>

<script>
  import HelloVuex from "./components/HelloVuex";

  export default {
    name: 'App',
    components: {
      HelloVuex
    },
    methods: {
      addition() {
        this.$store.commit('increment')
      },
      subtraction() {
        this.$store.commit('decrement')
      }
    },
    data() {
      return {
        message: '我是APP组件',
        counter: 0
      }
    }
  }
</script>

<style>
</style>

效果

Vuex核心概念

Vuex有几个比较核心的概念

State
Getters
Mutation
Action
Module

State单一状态树

推荐只使用一个State

Getters基本使用

案例准备

index.js

const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      {id: 110, name: 'aaa', age: 18},
      {id: 111, name: 'bbb', age: 19},
      {id: 112, name: 'ccc', age: 23},
      {id: 113, name: 'ddd', age: 42}
    ]
  },
  getters: {}
})

获取 counter 的乘积

geeters中定义方法

1
2
3

powerCounter(state) {
  return state.counter * state.counter
}

App.vue中可以直接获得

1	<h2>{{$store.getters.powerCounter}}</h2>

获取年龄大于20的学生

使用过滤器

more20stu(state) {
  // 返回年龄大于20的学生
  return state.students.filter(s => s.age >= 20)
}

获取年龄大于20的学生的人数

定义在Getters里的方法，你可以把另外一个geeters方法当作参数传入

1
2
3

more20stuLength(state, getters) {
  return getters.more20stu.length
}

根据用户传入参数获得返回结果

moreAgeStu(state) {
  return function (age) {
    return state.students.filter(s => s.age > age)
  }
}

App.vue

1	<h2>{{$store.getters.moreAgeStu(18)}}</h2>

mutations

mutation传递参数

mutation提交风格

mutation响应规则

Vue.delete()用于删除

mutation常量类型-概念

mutation同步函数

如果mutation中有异步操作就使用Action

Action

index.js

const store = new Vuex.Store({
  state: {
    info: {
      name: 'kobe',
      age: '40',
      height: 1.98
    }
  },
  mutations: {
    updateInfo(state) {
      state.info.name = 'duxiu'
    }
  },
  actions: {
    // context上下文
    aUpdateInfo(context, payload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('updateInfo')
          console.log(payload);
          resolve('完成')
        }, 1000)
      })
    }
  }
})

App.vue

<template>
	<h2>{{$store.state.info}}</h2>
	<button @click="updateInfo">修改信息</button>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      updateInfo() {
        this.$store
          .dispatch('aUpdateInfo', '我是action')
          .then((data) => {
            console.log(data)
          })
      }
    }
  }
</script>