体验在 vue3 中使用 hooks

发表于 | 分类于 | 评论数： | 阅读次数：

hooks 是 react 首先提出来的概念,通过 hooks,可以将组件之间的公共逻辑抽离出来.vue3 通过响应式 API 支持了 hooks 的用法.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//hooks.js
//设置 hooks 需要导出一个 函数,这个函数一般以`use` 打头
import { ref } from 'vue'
import { req } from "@/http/http"
export const useDepartment = () => {
  	//在函数中定义响应式对象
    const deptList = ref([]);
  	//定义获取数据的方法
    const getDeptList = async () => {
        await req
            .getDep(
                {},
                {
                    page: 1,
                    size: 2000,
                }
            )
            .then((res) => {
                deptList.value = res.data.records;
            });
    }
    
    //最后需要return 这些数据
    return {
        deptList,
        getDeptList
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//app.vue
import { defineComponent, toRefs, reactive, inject, onMounted, ref } from "vue";
import { useDepartment } from "@/hooks/dept";
export default defineComponent({
setup(){
		//在setup 函数中调用 useDepartment()
		const {  deptList,getDeptList }  = useDepartment()
    onMounted(async ()=>{
      await getDeptList()
      //其他逻辑
    })
  return {
    ...toRefs("其他变量"),
    //返回响应式的对象
    deptList
  }
}
})
thank u !