vue实现 修改密码

1.定义一个对话框并绑定数据

  
    
      
       
    
    
      
      
    
    
       
      
    
    
       确认修改
                    重置
    
  
 

2.在data中定义数据

data(){
    var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.resetPwdForm.password_again !== '') {
                    this.$refs.pwdForm.validateField('password_again');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.resetPwdForm.new_password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
  return{
      ResetPwdDialogVisible: false,
            resetPwdForm: {
                username: '',
                password: '',
                new_password: '',
                password_again: '',
            },
            resetPwdRules: {
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: '用户密码的长度在6～18个字符',
                        trigger: 'blur'
                    },
                    { validator: validatePass, trigger: 'blur' }
                ],
                new_password: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: '用户密码的长度在6～18个字符',
                        trigger: 'blur'
                    },
                    { validator: validatePass, trigger: 'blur' }
                ],
                password_again: [
                    { required: true, message: '请确认新密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: '用户密码的长度在6～18个字符',
                        trigger: 'blur'
                    },
                    { validator: validatePass2, trigger: 'blur' }
      ],
   }
}

3.在methods中操作数据

submitForm(formName) {
   this.resetPwdForm.username =  this.$store.getters.username;
   console.log(this.resetPwdForm);
   this.$refs[formName].validate(async valid => {
   if (!valid) return;
   const {status: status} = await this.axios.put("users/resetPassword", this.resetPwdForm);
    if (status !== 200) return this.$message.error('重置密码失败！');
       this.$message.success("重置密码成功，正在跳转登录页面");
        this.$router.push("/Login").catch(err => {err})
        });
      },

resetForm(formName) { //重置
   this.$refs[formName].resetFields();
}

4.vuex中

//登录页面中 派发handleUserName事件

login(){
  v1.$store.commit('handleUserName', res.data.username);
}


//vuex中
const state = {
     username: '' || localStorage.getItem('username'),
},
const mutations = {
  
    handleUserName: (state, user_name) => {
        state.username = user_name
        // 把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初 
            始值（初始值为空）的情况
        localStorage.setItem('username', user_name)
    },
},
const getters = {
     username: (state) => state.username,
},
const store = new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
export default store