优化个人中心页面，使用 script setup 重写

src/api/index.js

@@ -6,7 +6,7 @@ import { ElMessage } from 'element-plus'
 
 const toLogin = () => {
     router.push({
-        path: '/login',
+        name: 'login',
         query: {
             redirect: router.currentRoute.value.path !== '/login' ? router.currentRoute.value.fullPath : undefined
         }

src/mock/member.js

@@ -39,5 +39,16 @@ export default [
                 }
             }
         }
+    },
+    {
+        url: '/mock/member/edit/password',
+        method: 'post',
+        response: {
+            error: '',
+            status: 1,
+            data: {
+                isSuccess: true
+            }
+        }
     }
 ]

src/router/index.js

@@ -32,6 +32,7 @@ const constantRoutes = [
                 component: () => import('@/views/personal/setting.vue'),
                 meta: {
                     title: '个人设置',
+                    cache: 'personalEditPassword',
                     breadcrumbNeste: [
                         { title: '个人设置', path: '/personal/setting' }
                     ]

src/store/modules/user.js

@@ -52,6 +52,19 @@ const actions = {
                 resolve(res.data.permissions)
             })
         })
+    },
+    editPassword({ state }, data) {
+        return new Promise(resolve => {
+            api.post('member/edit/password', {
+                account: state.account,
+                password: data.password,
+                newpassword: data.newpassword
+            }, {
+                baseURL: '/mock/'
+            }).then(() => {
+                resolve()
+            })
+        })
     }
 }
 

src/views/personal/edit.password.vue

@@ -4,7 +4,7 @@
         <page-main>
             <el-row>
                 <el-col :md="24" :lg="12">
-                    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                         <el-form-item label="原密码" prop="password">
                             <el-input v-model="form.password" type="password" placeholder="请输入原密码" />
                         </el-form-item>
@@ -24,53 +24,57 @@
     </div>
 </template>
 
-<script>
-export default {
-    data() {
-        const validatePassword = (rule, value, callback) => {
-            if (value !== this.form.newpassword) {
-                callback(new Error('请确认新密码'))
-            } else {
-                callback()
-            }
-        }
-        return {
-            form: {
-                password: '',
-                newpassword: '',
-                checkpassword: ''
-            },
-            rules: {
-                password: [
-                    { required: true, message: '请输入原密码', trigger: 'blur' }
-                ],
-                newpassword: [
-                    { required: true, message: '请输入新密码', trigger: 'blur' },
-                    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
-                ],
-                checkpassword: [
-                    { required: true, message: '请输入新密码', trigger: 'blur' },
-                    { validator: validatePassword }
-                ]
-            }
-        }
-    },
-    methods: {
-        onSubmit() {
-            this.$refs['form'].validate(valid => {
-                if (valid) {
-                    this.$store.dispatch('user/editPassword', this.form).then(() => {
-                        this.$message({
-                            type: 'success',
-                            message: '修改成功，请重新登录'
-                        })
-                        this.$store.dispatch('user/logout').then(() => {
-                            this.$router.push('/login')
-                        })
-                    }).catch(() => {})
-                }
-            })
-        }
+<script setup name="PersonalEditPassword">
+const store = useStore()
+const route = useRoute(), router = useRouter()
+const { proxy } = getCurrentInstance()
+
+const validatePassword = (rule, value, callback) => {
+    if (value !== form.value.newpassword) {
+        callback(new Error('请确认新密码'))
+    } else {
+        callback()
     }
 }
+
+const form = ref({
+    password: '',
+    newpassword: '',
+    checkpassword: ''
+})
+
+const rules = ref({
+    password: [
+        { required: true, message: '请输入原密码', trigger: 'blur' }
+    ],
+    newpassword: [
+        { required: true, message: '请输入新密码', trigger: 'blur' },
+        { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
+    ],
+    checkpassword: [
+        { required: true, message: '请输入新密码', trigger: 'blur' },
+        { validator: validatePassword }
+    ]
+})
+
+function onSubmit() {
+    proxy.$refs['formRef'].validate(valid => {
+        if (valid) {
+            store.dispatch('user/editPassword', form.value).then(() => {
+                proxy.$message({
+                    type: 'success',
+                    message: '模拟修改成功，请重新登录'
+                })
+                store.dispatch('user/logout').then(() => {
+                    router.push({
+                        name: 'login',
+                        query: {
+                            redirect: route.fullPath
+                        }
+                    })
+                })
+            }).catch(() => {})
+        }
+    })
+}
 </script>

src/views/personal/setting.vue

@@ -67,44 +67,30 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'PersonalSetting',
-    beforeRouteLeave(to, from, next) {
-        if (['personalEditPassword'].includes(to.name)) {
-            this.$store.commit('keepAlive/add', 'PersonalSetting')
-        }
-        next()
-    },
-    props: {},
-    data() {
-        return {
-            form: {
-                headimg: '',
-                mobile: '',
-                name: '',
-                qq: '',
-                wechat: ''
-            }
-        }
-    },
-    created() {},
-    mounted() {},
-    methods: {
-        handleSuccess(res) {
-            if (res.error == '') {
-                this.form.headimg = res.data.path
-            } else {
-                this.$message.warning(res.error)
-            }
-        },
-        editPassword() {
-            this.$router.push({
-                name: 'personalEditPassword'
-            })
-        }
+<script setup name="PersonalSetting">
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+
+const form = ref({
+    headimg: '',
+    mobile: '',
+    name: '',
+    qq: '',
+    wechat: ''
+})
+
+function handleSuccess(res) {
+    if (res.error == '') {
+        form.value.headimg = res.data.path
+    } else {
+        proxy.$message.warning(res.error)
     }
 }
+function editPassword() {
+    router.push({
+        name: 'personalEditPassword'
+    })
+}
 </script>
 
 <style lang="scss" scoped>