十七、Promise 的使用

导读：Promise 是异步编程的一种解决方案【同步：sync，异步：async】

1、Promise的三种状态

• pending ：等待状态，比如正在进行网络请求，或者定时器没有到时间
• fulfill ：满足状态，当我们主动回调了 resolve 时，就处于该状态，并且会回调 .then()
• reject ：拒绝状态，当我们主动回调了 reject 时，就处于该状态，并且会回调 .catch()
  
  简写为如下：
  

  2、Promise链式调用的三种简写

  以 resolve 为例，reject同 resolve
  
  最终可简写为：
  

  3、Promise 的 all 方法的使用

  

  十八、Vuex

  官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
• 状态管理到底是什么？
  • 简单来说是将多个组件共享的变量全部存储在一个对象里面

1. vue init webpack learnvuex：创建Vuex的项目
2. npm install vuex@3.0.1 --save ：安装Vuex

1、单界面状态管理的实现

2、多界面状态管理

1. 创建store/index.js文件
   
   1. 导入、挂载并拿到store
      

1. 创建 Hellovuex.vue 组件
   

2. App.vue 中使用组件

    <template>
      <div id="app">
        <h2>{
        
        {
        
        message}}</h2>
    <!--    <h2>{
        
        {
        
        counter}}</h2>-->
        <h2>-------------App内容----------------</h2>
        <h2>{
        
        {
        
        $store.state.counter}}</h2>
        <button @click="$store.state.counter++">+</button>
        <button @click="$store.state.counter--">-</button>
        <h2>-------------App内容----------------</h2>
        <Hello-vuex/>
        <!--    <router-view/>-->
      </div>
    </template>
   
    <script>
    import HelloVuex from "./components/HelloVuex";
      export default {
        
        
        name: 'App',
        components:{
        
        
          HelloVuex
        },
        data(){
        
        
          return{
        
        
            message:'你好，从今天开始学习Vuex',
            // counter:0
          }
        }
      }
    </script>
   

   3、插件 vuex-devtools

   安装vuex-devtools ：https://blog.csdn.net/qq_53810245/article/details/121295089

4、mutations

mutations 唯一的目的就是修改 state 中状态
mutations 中的每个方法尽可能完成的事件比较单一一点儿

4.1、mutations 是定义方法

修改state中的数据都是通过mutations去修改的
作用是：在浏览器中可以跟踪到数据的变化状况

在App.vue 中设置点击的方法，在方法中调用this.$store.commit('increment)

1. 从而使用index中设置的方法
   
2. 通过 mutation更新
   

   4.2、Mutation中的参数

3. 参数被称为mutation的载荷（Payload）
4. 参数可以是数，也可以是对象
5. 第一步：写入按钮并设置点击事件
   
   1. 第二步：添加相关方法
      
   2. 在index.js中设置相关方法
      ```js
      import Vue from "vue";
      import Vuex from 'vuex'
      import {stat} from "copy-webpack-plugin/dist/utils/promisify";
      // 1.安装插件
      Vue.use(Vuex)
      // 2.创建对象
      const store = new Vuex.Store({
      // 用于保存状态
      state:{
      counter:10,
      students:[
      {id:110,name:'why',age:18},
      {id:111,name:'koba',age:24},
      {id:112,name:'james',age:30},
      {id:113,name:'curry',age:10}
      ]
      },
      mutations:{
      // 定义方法,修改state中的数据都是通过mutations去修改的
      /*
      Mutation 状态主要包括两部分:
   • 字符串的事件类型(type)
   • 一个回调函数(handler)，该回调函数的第一个参数就是state
     */
     increment(state){

     state.counter++
     

     },
     decrement(state){

     state.counter--
     

     },
     incrementCount(state,count){

     state.counter += count;
     

     },
     addStudent(state,stu){

     state.students.push(stu)
     

     }
     },
     // 做一些异步操作
     actions:{},
     // 类似于组组件中的计算属性
     getters:{
     powerCounter(state){

     return state.counter * state.counter
     

     },
     // 获取年龄大于20岁的集合
     more20stu(state){

     return state.students.filter(s=>s.age>20)
     

     },
     // 获取年龄大于20岁的集合的长度
     more20stuLength(state,getters){

     return getters.more20stu.length
     

     },
     // 获取年龄大于指定的岁数的集合
     moreAgestu(state,getters){

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

     // 将上述函数改为箭头函数为：
     /* return age => {

       return state.students.filter(s => s.age > age)
     }*/
     

     }
     },
     // 划分模块
     modules:{}
     })
     // 3.导出 store对象
     export default store
     ```
   1. Mustation 提交风格，当为特殊提交封装时需要传入payload
      
      

5、vuex - getters

作用：当我们每次想要使用state经过变化之后的值时

1. 在App.vue中使用getters
   

2. index.js中写入相关函数
   

   6、vuex-数据的响应式原理

   Vuex的store中的state是响应式的，当state中的数据发生改变时，Vue组件会自动更新
   但是需遵守一些Vuex对应的规则

   • 提前在store中初始化好所需的规则
     
     
     
     

响应式管理

响应式 - 添加： Vue.set(state.info,'address','洛杉矶')// 响应式的添加属性address

响应式 - 删除：Vue.delete(state.info,'age') // 响应式的删除age属性

• 当给state中的对象添加新属性时，使用下面的方式
  • 方式一：使用Vue.set(obj,'newProp',123)
  • 方式二：用新对象给旧对象重新赋值

7、vuex-actions

异步操作不能在 Mutation中进行
Action类似于 Mutation ,但是是来代替 Mutation 进行异步操作的

8、vuex-modules

8.1、是什么

将 store 分割成模块（Modules），而某个模块拥有自己的 state、mutations、action、getters等

8.2、怎么做

那我们按照什么样的方式来组织模块呢？

8.3、vuex-modules中的相关属性

9、对象的解构

10、Vuex的安装与使用

1. 安装：npm install vuex@3.1.0 --save
2. 创建目录：src/store/index.js
3. 在index.js中导入使用：
   ```js
   import Vue from 'vue'
   import App from './App.vue'

//1. 安装插件
Vue.use(Vuex)
//2. 创建 Store 对象
const store = new Vuex.Store({
state:{
// 添加的商品
cartList:[]
},
mutations:{
addCounter(state,payload){
payload.count++;
}
addToCart(state,payload){
state.cartList.push(payload)
}
},
actions:{
addCart（context,payload){
// 1.payload ：新添加的商品，判断与已加商品是否重复
let oldProduct = null;
for(let item of context.state.cartList){
if(item.iid === payload.iid){
oldProduct = item;
}
}
// 步骤1 可以一步到位为以下内容：
// let oldProduct = context.state.carList.find(item => item.iid === payload.iid)
// 2.判断 oldProduct
if(oldProduct){
// oldProduct.count += 1;该方法无法跟踪
context.commit('addCounter),oldProduct
}else{
payload.count = 1;
// state.carList.push(payload);该方法无法跟踪
context.commit('addToCart',payload)
}
}
}
})

// 3.挂载到 Vue 实例上
export default store

```