前端学习笔记（六）：vuex基础-Element表单验证-async和await

Vuex基础

vuex基础-介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用**集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测**的方式发生变化。

• vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。(对于之前的组件可以父子兄弟传值，但是涉及到非这类关系组件的传值，就要用到VUEX)
  
  结论

1. 修改state状态必须通过**mutations**
2. **mutations**只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
3. 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
4. state的状态即共享数据可以在组件中引用
5. 组件中可以调用action

vuex基础-初始化功能

建立一个新的脚手架项目, 在项目中应用vuex

$ vue create  demo

开始vuex的初始化建立，选择模式时，选择默认模式

初始化：

• 第一步：npm i vuex --save => 安装到**运行时依赖** => 项目上线之后依然使用的依赖 ,开发时依赖 => 开发调试时使用

开发时依赖 就是开发的时候，需要的依赖，运行时依赖，项目上线运行时依然需要的

• 第二步： 在main.js中 import Vuex from 'vuex'
• 第三步：在main.js中 Vue.use(Vuex) => 调用了 vuex中的 一个install方法
• 第四步：const store = new Vuex.Store({...配置项})
• 第五步：在根实例配置 store 选项指向 store 实例对象

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({})
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

vuex基础-state

1. state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中

定义state

// 初始化vuex对象
//main.js上述刚刚定义的文件中
const store = new Vuex.Store({
  state: {
    // 管理数据
    count: 0
  }
})

2. 获取count的形式：
   （1）原始形式- 插值表达式
   App.vue组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性获取count， 如下

<div> state的数据：{{ $store.state.count }}</div>

（2）计算属性 - 将state属性定义在计算属性中

// 把state中数据，定义在使用组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }

 <div> state的数据：{{ count }}</div>

（3）辅助函数 - mapState

mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便用法

第一步：导入mapState

import { mapState } from 'vuex'

第二步：采用数组形式引入state属性
第三步：利用延展运算符将导出的状态映射给计算属性

  computed: {
    ...mapState(['count'])
  }

 <div> state的数据：{{ count }}</div>

vuex基础-mutations

state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成**数据快照**。数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步。

定义mutations

//main.js中
const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 定义mutations
  mutations: {
     //存放修改state的方法b
  }
})

格式说明

mutations是一个对象，对象中存放修改state的方法

mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷(可有可无)
    addCount (state,payload) {
      state.count += payload
    }
  },

如何在组件中调用main.js里面定义的mutations方法？

（1）原始形式-$store

新建组件child-a.vue，内容为一个button按钮，点击按钮调用mutations

<template>
  <button @click="test">+n</button>
</template>

<script>
export default {
    methods: {
    //   调用方法
      test () {
         // 调用store中的mutations 提交给muations
        // commit('muations名称', 2)
        this.$store.commit('addCount', 10)  // 直接调用mutations
    }
  }
}
</script>

（2）辅助函数 - mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}

上面代码的含义是将mutations的方法导入了methods中，等同于

methods: {
      // commit(方法名, 载荷参数)
      addCount () {
          this.$store.commit('addCount')
      }
 }

此时，就可以直接通过this.addCount调用了

<button @click="addCount(100)">+100</button>

但是请注意： Vuex中mutations中要求不能写异步代码（如定时函数），如果有异步的ajax请求，应该放置在actions中

vuex基础-actions

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

1. 定义actions

//在main.js中和mutations同级别
 actions: {
  //  获取异步的数据 context表示当前的store的实例 （因为修改数据都必须在mutations定义的方法中）
  //可以通过 context.state 获取状态 也可以通过context.commit 来提交mutations， 也可以 context.diapatch调用其他的action
    getAsyncCount (context) {
      setTimeout(function(){
        // 一秒钟之后 要给一个数 去修改state
        context.commit('addCount', 123)
      }, 1000)
    }
 } 

2. 在其他使用的组件中进行调用的方式：
   （1）原始调用 - $store 也是写在methods的方法里。

 addAsyncCount () {
     this.$store.dispatch('getAsyncCount')//执行action的名称
     //this.$store.dispatch('getAsyncCount', 123)
 }

（2）辅助函数 -mapActions

actions也有辅助函数，可以将action导入到组件中

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['getAsyncCount'])
}

也可以直接通过 this.方法就可以调用

<button @click="getAsyncCount(111)">+异步</button>

vuex基础-getters

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters（通常给想方便使用这个模块的另一个模块的js中使用，通常是index.js）

例如，main.js里面的state中定义了list，为1-10的数组，

state: {
    list: [1,2,3,4,5,6,7,8,9,10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

定义getters

//若分模块了，放在对应文件的js下
  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值（filterList自定义名字）
     filterList:  state =>  state.list.filter(item => item > 5)
  }

使用getters

（1）原始方式 -$store

<div>{{ $store.getters.filterList }}</div>

（2）辅助函数 - mapGetters（注意在计算属性中使用）

computed: {
    ...mapGetters(['filterList'])
}

 <div>{{ filterList }}</div>

Vuex中的模块化-Module

为什么会有模块化？

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护。 由此，又有了Vuex的模块化，在对应子模块进行书写了，而不是都放在main.js中了。

模块化的简单应用

应用：将总的js文件按照模块分为不同的js模块。
定义两个模块 user 和 setting

user中管理用户的状态 token

setting中管理 应用的名称 name

const store  = new Vuex.Store({
  modules: {
    user: {
       state: {
         token: '12345'
       }
    },
    setting: {
      state: {
         name: 'Vuex实例'
      }
    }
  })

定义child-b组件，分别显示用户的token和应用名称name

<template>
  <div>
      <div>用户token {{ $store.state.user.token }}</div>
      <div>网站名称 {{ $store.state.setting.name }}</div>
  </div>
</template> 

请注意： 此时要获取子模块的状态 需要通过 $store.state.模块名称.属性名 来获取，不需要再写子模块的state。

看着获取有点麻烦，我们可以通过之前学过的getters来改变一下

//根级别的，即main.js
 getters: {
   token: state => state.user.token,
   name: state => state.setting.name
 } 

请注意：这个getters是根级别的getters哦

通过mapGetters引用

 computed: {
       ...mapGetters(['token', 'name'])
 }

模块化中的命名空间

命名空间 namespaced

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。就是无论在哪个模块下，所有人默认都可以直接调用的。

但是，如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置

高封闭性？可以理解成 一家人如果分家了，此时，你的爸妈可以随意的进出分给你的小家，你觉得自己没什么隐私了，我们可以给自己的房门加一道锁（命名空间 namespaced）,你的父母再也不能进出你的小家了

如

  user: {
       namespaced: true,
       state: {
         token: '12345'
       },
       mutations: {
        //  这里的state表示的是user的state
         updateToken (state) {
            state.token = 678910
         }
       }
    },

使用带命名空间的模块 **action/mutations**进行调用：

方案1：直接调用-带上模块的属性名路径

test () {
   this.$store.dispatch('user/updateToken') // 直接调用方法
}

方案2：辅助函数-带上模块的属性名路径

  methods: {
       ...mapMutations(['user/updateToken']),
       test () { 
       //直接使用原来带路径的形式进行调用的话不符合规范，因此我们再把其封装为另一个函数test
           this['user/updateToken']()//返回函数的名字后再加括号传参调用，只能写为中括号的形式哦
       }
   }
  <button @click="test">修改token</button>

方案3： createNamespacedHelpers 创建基于某个命名空间辅助函数

import { mapGetters, createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user') //基于user模块的mapMutations
methods: {
       ...mapMutations(['user/updateToken']),
   }
<button @click="updateToken">修改token2</button>

Element的表单校验补充

我们尝试通过一个案例对Element的表单校验进行一下补充：官网：https://element.eleme.cn/#/zh-CN/component/installation

实现表单基本结构

安装Element

开发时依赖 ： 开发环境所需要的依赖 -> devDependencies

运行时依赖: 项目上线依然需要的依赖 -> dependencies

$ npm i element-ui //默认装到运行时依赖

在main.js中对ElementUI进行注册

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

表单校验的先决条件

接下来，完成表单的校验规则如下几个先决条件

（1）给el-form绑定model和rules
v-model 是 v-model:value 的缩写，通常用于表单上的双向数据绑定（表单接受值 value，故v-model默认收集的就是 value ，所以缩写直接省略 value），可以实现子组件到父组件的双向数据动态绑定。数据不仅能从data流向页面，还可以从页面流向data。

:model:是 v-bind:model 的缩写，可以实现将父组件的值传递给子组件，但是子组件不能传给父组件，无法双向绑定。
下述的代码注意是：model

<el-form style="margin-top: 50px"   ref="loginForm"  :model="loginForm" :rules="loginRules">

loginRules: {}//在data里面的

（2）el-form-item设置prop属性

校验谁写谁的字段

<el-form-item prop="mobile">
   ...
<el-form-item prop="password">
   ...

（3）给input绑定字段属性，注意是对应表单的属性加点

<el-input v-model="loginForm.mobile"></el-input>
<el-input v-model="loginForm.password"></el-input>

（4）数据准备model属性 (表单数据对象)

  props: ["mobile", "password"],
  data() {
    return {
      loginForm: {
        mobile: "",
        password: "",
      },
      loginRules: {},
    };
  },
  }

表单校验规则

此时，先决条件已经完成，要完成表单的校验，需要编写规则

ElementUI的表单校验规则来自第三方校验规则参见 async-validator

我们介绍几个基本使用的规则

规则	说明
required	如果为true，表示该字段为必填
message	当不满足设置的规则时的提示信息
pattern	正则表达式，通过正则验证值
min	当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值
max	当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值
trigger	校验的触发方式，change（值改变） / blur （失去焦点）两种，
validator	如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验

根据以上的规则，针对当前表单完成如下要求{key：value}，对应不同的message提示信息，填写不同的规则。

手机号 1.必填 2.手机号格式校验 3. 失去焦点校验

密码 1.必填 2.6-16位长度 3. 失去焦点校验

规则如下

      loginRules: {
      // mobile是loginForm里面绑定的要检验的字段
        mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' },             {
          min: 6, max: 16, message: '密码应为6-16位的长度', trigger: 'blur'
        }]
      }

自定义校验规则

自定义校验规则怎么用

validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))

var  func = function (rule, value, callback) {
    // 根据value进行进行校验 
    // 如果一切ok  
    // 直接执行callback
    callback() // 一切ok 请继续
    // 如果不ok 
    callback(new Error("错误信息"))
}

根据以上要求，增加手机号第三位必须是9的校验规则

如下

// 自定义校验函数
    const checkMobile = function (rule, value, callback) {
    //charAt拿到对应的位置字符串。从0开始
      value.charAt(2) === '9' ? callback() : callback(new Error('第三位手机号必须是9'))
    }
//将校验函数加到对应的validator属性里面
 mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }, {
            trigger: 'blur',
            validator: checkMobile
   }],

手动校验的实现

最后一个问题，如果我们直接点登陆按钮，没有离开焦点，那该怎么校验 ？

此时我们需要用到手动完整校验 案例

form表单提供了一份API方法，我们可以对表单进行完整和部分校验

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array | string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array | string)

这些方法是el-form的API，需要获取el-form的实例，才可以调用

（1）采用ref进行调用名字是可以重新再起的

<el-form ref="loginForm" style="margin-top:40px" :model="loginForm" :rules="loginRules">

调用校验方法

 <el-button type="primary" style="width: 100%" @click="login"
            >登录</el-button >

//放到methods里面
  login() {
      // this.$refs.loginForm.validate(isOK => {
      //     if (isOK) {
      //       // 表示 校验是通过
      //       console.log("校验通过")  // 去做接下来的业务
      //     }
      // })
      // then是成功校验 catch是失败校验，和下述方式等同
      this.$refs.loginForm
        .validate()
        .then(() => {
          console.log("成功");
        })
        .catch(() => {
          console.log("失败");
        });
    },

Async 和 Await

针对异步编程，我们学习过Ajax的回调形式，promise的链式调用形式，两种方式是等价的，如下所示：

ajax回调模式

// 回调形式调用
$.ajax({
    url,
    data,
    success:function(result){
        $.ajax({
            data:result,
            success: function(result1){
                $.ajax({
                    url,
                    data: result1
              })
            }
        })
    }
})

promise的链式回调函数，因为axios返回的就是promise对象

// 链式调用 没有嵌套
axios({ url, data}).then(result => {
    return  axios({ data:result }) 
}).then(result1 => {
     return  axios({ data:result1 }) 
}).then(result2 => {
   return axios({ data: result2 }) 
}).then(result3 => {
    return axios({ data: result3 }) 
})

关于Promise你必须知道几件事

关于Promise你必须知道几件事

如何声明一个Promise

new Promise(function(resolve, reject){ })

如果想让Promise成功执行下去，需要执行resolve，如果让它失败执行下去，需要执行reject

new Promise(function(resolve, reject) { 
    resolve('success')  // 成功执行，返回success
}).then(result => {
    alert(result)//弹出success
})

new Promise(function(resolve, reject) { 
    reject('fail')  // reject里面的数只会进入到catch，并且如果又变量接收返回值，会报错
}).then(result => {
    alert(result)//不会执行，因为reject只会进入catch
}).catch(error => {
     alert(error)
})

如果想终止在某个执行链的位置，可以用Promise.reject(new Error())

new Promise(function(resolve, reject) {
    resolve(1)
}).then(result => {
    return result + 1   //2
}).then(result => {
    return result + 1   //3
}).then(result => {
  return  Promise.reject(new Error(result + '失败'))//终止，直接进入catach
   // return result + 1
}).then(result => {
    return result + 1
}).catch(error => {	
    alert(error)//弹出终止reject里面的信息
})

异步编程的终极方案 async /await

async 和 await实际上就是让我们像写同步代码那样去完成异步操作

await 表示强制等待的意思，await关键字的后面要跟一个promise对象，它总是等到该promise对象resolve成功之后执行，并且会返回resolve的结果

 async test () {
      // await总是会等到 后面的promise执行完resolve
      // async /await就是让我们 用同步的方法去写异步
      const result = await new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(5)
        }, 5000) 
      })
      alert(result)
    }

上面代码会等待5秒之后，弹出5

async 和 await必须成对出现

由于await的强制等待，所以必须要求使用await的函数必须使用async标记， async表示该函数就是一个异步函数，不会阻塞其他执行逻辑的执行

async test () {
      const result = await new Promise(function(resolve){  
         setTimeout(function(){
             resolve(5)
         },5000)
       })
       alert(result)
    },
    test1(){
      this.test()
      alert(1)/
    }

上述先弹出1 ，后面过5秒再弹出5，因为test标记了async，不会阻塞下面代码的执行。 通过上面的代码我们会发现，异步代码总是最后执行，标记了async的函数并不会阻塞整个的执行往下走

如果你想让1在5弹出之后再弹出，我们可以这样改造

   async test1(){
     await this.test()
      alert(1)//因为加了await我们要等他执行完在执行 
   }
// 这充分说明 被async标记的函数返回的实际上也是promise对象

如果promise异常了怎么处理？

promise可以通过catch捕获，async/ await捕获异常要通过 try/catch，因为我们上述讲的如果遇到异常用catch的前提是我们没有用到async/ await，如果要是用到了再执行reject异常的话就只能用try catch。

   async  getCatch () {
      try {
        await new Promise(function (resolve, reject) {
          reject(new Error('fail'))
        })
        alert(123)
      } catch (error) {
        alert(error)
      }
   }

async / await 用同步的方式 去写异步