2 08.封装组合式api简化代码

为了减少代码复杂量，我们简化一下代码 ，方便扩展性

  • 组合式API

  • 新建文件： src/composables/useManager.js

import { ref, reactive } from 'vue'
import { logout, updatepassword } from "~/api/manager"
import { showModal, toast } from "~/composables/util"
import { useRouter } from "vue-router"
import { useStore } from "vuex"



export function userRepassword() {
    const store = useStore()
    const router = useRouter()

    // 修改密码,点击登录验证
    const formDrawerRef = ref(null)
    const formRef = ref(null)

    const form = reactive({
        oldpassword: '',
        password: '',
        repassword: '',

    })

    // 定义验证规则
    const rules = {
        oldpassword: [
            {
                required: true,
                message: '旧密码不能为空',
                trigger: 'blur',
            },
        ],
        password: [
            {
                required: true,
                message: '新密码不能为空',
                trigger: 'blur',
            },
        ],
        repassword: [
            {
                required: true,
                message: '确认密码不能为空',
                trigger: 'blur',
            },
        ]
    }


    const onSubmit = () => {
        formRef.value.validate((valid) => {
            if (!valid) {
                console.log('error')
            }

            // 加载动画
            formDrawerRef.value.showLoading()

            updatepassword(form).then(res => {
                toast('修改密码成功，请重新登录')
                store.dispatch('logout')
                router.push('/login')
            }).finally(() => {
                formDrawerRef.value.hideLoading()
            })

        })
    }

    const openRePasswordForm = () => formDrawerRef.value.open()

    return {
        formDrawerRef,
        form,
        rules,
        formRef,
        onSubmit,
        openRePasswordForm
    }

}


export function useLogout() {
    const store = useStore()
    const router = useRouter()
    function handleLogout() {
        showModal("是否要退出登录？").then(res => {
            logout().finally(() => {
                // 退出
                store.dispatch('logout')
                // 跳转回登录页
                router.push('/login')
                // 提示退出登录成功
                toast('退出登录成功')
            })
        })
    }

    return {
        handleLogout
    }
}

  • 代码更改

    FHeader.vue

Previous2 07.封装通用弹框表单组件Next2 09.侧边菜单开发 样式布局和路由跳转

Last updated