一、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('验证码不正确'))
}
}
},
}