vue3.0 组合式api setup
1 setup接受参数props
2 定义相应数据,简单数据ref(0)。复杂数据const state= reactive({name:1,value:''})，然后使用...toRefs(state)转化
3 最后setup函数，统一return 定义的响应式数据和method.可以在模板里面使用
export default {
name: 'Account',
setup() {
const nameRef = ref(null)
const passRef = ref(null)
const state = reactive({
user: null,
nameForm: {
loginName: '',
nickName: ''
},
passForm: {
oldpass: '',
newpass: ''
},
rules: {
loginName: [
{ required: 'true', message: '登录名不能为空', trigger: ['change'] }
],
nickName: [
{ required: 'true', message: '昵称不能为空', trigger: ['change'] }
],
oldpass: [
{ required: 'true', message: '原密码不能为空', trigger: ['change'] }
],
newpass: [
{ required: 'true', message: '新密码不能为空', trigger: ['change'] }
]
},
})
onMounted(() => {
axios.get('/adminUser/profile').then(res => {
state.user = res
state.nameForm.loginName = res.loginUserName
state.nameForm.nickName = res.nickName
})
})
const submitName = () => {
nameRef.value.validate((vaild) => {
if (vaild) {
axios.put('/adminUser/name', {
loginUserName: state.nameForm.loginName,
nickName: state.nameForm.nickName
}).then(() => {
ElMessage.success('修改成功')
window.location.reload()
})
}
})
}
const submitPass = () => {
passRef.value.validate((vaild) => {
if (vaild) {
axios.put('/adminUser/password', {
originalPassword: md5(state.passForm.oldpass),
newPassword: md5(state.passForm.newpass)
}).then(() => {
ElMessage.success('修改成功')
window.location.reload()
})
}
})
}
return {
...toRefs(state),
nameRef,
passRef,
submitName,
submitPass
}
}
}
