Encapsulate Hook function based on vue3+ts+vant4

Based on vue3+ts+vant4 encapsulating composable as Hook

自我记录

Extract a hook to provide, view the picture preview function
xxx is used, and xx is also used.
Now there is only one function for reuse, in fact, status data, etc., or multiple functions can be reused.

src/composable/index.ts

import {
    
     showImagePreview } from 'vant'
import {
    
     ref } from 'vue'
// 封装查看预览图片逻辑
// 封装逻辑，规范 useXxx，表示使用某功能
export const useShowPrescription = () => {
    
    
  // 预览图片函数
  const showPrescription = async (id?: string) => {
    
    
    if (id) {
    
    
      const res = await getPrescriptionPic(id)
      showImagePreview([res.data.url])
    }
  }
  return {
    
     showPrescription }
}

usesrc/views/User/index.vue

<script setup lang="ts">
import {
    
     useShowPrescription } from '@/composable'
const {
    
     showPrescription } = useShowPrescription()
const onSelect = (i: number) => {
    
    
  if (i === 0) {
    
    
    showPrescription(urlId)
  }
}
</script>