记录vue中的一些方法用法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了记录vue中的一些方法用法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2908字，纯文字阅读大概需要5分钟。

内容图文

一、dispatch/commit

this.$store.dispatch("actions方法名", 值)  

this.$store.commit('mutations方法名',值)

Action提交的是Mutation，不能够直接修改state中的状态，而Mutations是可以直接修改state中状态的；

Action是支持异步操作的，而Mutations只能是同步操作。

handleLogin() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
          //含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('actions方法名',值)
          //commit：同步操作，写法：this.$store.commit('mutations方法名',值)
            .dispatch("Login", this.form)
            //.then((data)=>{ })里的data是指接口成功返回的数据,包含请求头,请求体,等信息;
            //这里的then()方法有两个参数,第一个是成功时的回调方法,默认给这个方法传递了成功的数据,另一个是失败的方法,以及失败的数据
            .then(() => {
              //处理成功后的逻辑
              this.$router.push({ path: "/" });
            })
            .catch(error => {
              //处理错误后的逻辑
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },

二、.then

.then((data)=>{ })里的data是指接口成功返回的数据,包含请求头,请求体,等信息;这里的then()方法有两个参数,第一个是成功时的回调方法,默认给这个方法传递了成功的数据,另一个是失败的方法,以及失败的数据

三、validate 表单效验

1.在uitls文件夹中新建一个validate.js文件

2.在validate.js文件 写入：

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path);
}

3.在 html代码中 定义 :rules=’ '

<a-form-model
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
        ref="ruleForm"
>

<a-form-model-item label="账号" prop="username">
          <a-input v-model="form.username" :maxLength="11" @keyup.enter.native="handleLogin" />
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password">
          <a-input
            v-model="form.password"
            type="password"
            @keyup.enter.native="handleLogin"
          />
        </a-form-model-item>
        <a-form-model-item label="验证码" prop="identifyCode">
            <a-input
              v-model="form.identifyCode"
              :maxLength="4"
              placeholder="请输入验证码"
              style="width: 120px;display: inline-block"
              @keyup.enter.native="handleLogin"
            />
            <div style="display: inline-block;cursor: pointer;height: 32px;line-height: 32px;position: absolute;left: 150px" >
              <v-sidentify ref="sidentifys"></v-sidentify>
            </div>
</a-form-model-item>

4.在 export default return 中定义rules规则并使用

data() {
    return {
      form: {
        username: 'admin',
        password: '123456',
        identifyCode:'',
        type:'hl',
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        identifyCode: [
            { required: true, message: "请输入验证码", trigger: "blur" },
          { required: true, validator:this.validatePassword, trigger: ['blur'] },
          ]
      },

    };
  },

methods:{
    validatePassword(rule,value,callback){
      if(!value){
        return callback(new Error('验证码不可为空'))
      }else{
        if(String(value).toLowerCase()==String(this.$refs.sidentifys.identifyCode).toLowerCase()){
          callback();
        }else{
          return callback(new Error('验证码不正确'))
        }
      }
    },
}

四、toLowerCase() 方法用于把字符串转换为小写

.toLowerCase()方法需要前面是字符串类型

内容总结

以上是互联网集市为您收集整理的记录vue中的一些方法用法全部内容，希望文章能够帮你解决记录vue中的一些方法用法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---