> For the complete documentation index, see [llms.txt](https://close.gitbook.io/yun-wei-bi-ji/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://close.gitbook.io/yun-wei-bi-ji/centos/vue/xiang-mu/2-08.-feng-zhuang-zu-he-shi-api-jian-hua-dai-ma.md).
# 2 08.封装组合式api简化代码
> 为了减少代码复杂量，我们简化一下代码 ，方便扩展性
* #### 组合式API
* > 新建文件： src/composables/useManager.js
```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
```js
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://close.gitbook.io/yun-wei-bi-ji/centos/vue/xiang-mu/2-08.-feng-zhuang-zu-he-shi-api-jian-hua-dai-ma.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.