记录vue中的一些方法用法

2021-04-13 14:32:13 阅读：168 来源： 互联网

标签：vue return toLowerCase 记录 true 用法 data 方法 store

一、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,return,toLowerCase,记录,true,用法,data,方法,store
来源： https://blog.csdn.net/weixin_49261425/article/details/115663923

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9