29.vue3学习篇-自定义hooks

在 Vue 3 中，自定义 Hooks 是一种将可复用的逻辑提取出来的有效方式。以下是创建和使用自定义 Hooks 的步骤：

一、创建自定义 Hook

1. 创建一个以use开头的函数，例如useMousePosition

// src下新建hook文件夹，然后创建useMousePosition.js

import { ref, onMounted, onUnmounted } from 'vue'

function useMousePosition () {
    // 定义响应式数据
    const x = ref(0)
    const y = ref(0)
    
    // 定义一些方法
    const updatePosition = (e) => {
        x.value = e.pageX
        y.value = e.pageY
    }

    onMounted (() => {
        document.addEventListener('click', updatePosition)
    })

    onUnmounted(() => {
        document.removeEventListener('click', updatePosition)
    })

    return {
        x,
        y
    }
}

export default useMousePosition

二、使用自定义 Hook

1.在你的 Vue 组件中引入自定义 Hook。

// Mousemove.vue 文件中

<template>
    <div>
        <p>X: {{ x }}</p>
        <p>Y: {{ y }}</p>
    </div>
</template>

<script>
// 自定义hooks，一般都是 useXXXX
import { defineComponent } from 'vue'
import useMousePosition from './hooks/useMousePosition'

export default defineComponent({
    setup () {
        const {x, y} = useMousePosition()

        return {
            x,
            y,
        }
    }
})


</script>

三、在自定义 Hook 中使用其他的 Vue 3 特性

1.使用组合式 API 的其他函数

例如使用watch来观察响应式数据的变化：

import { ref, watch } from 'vue';

export function useDataWatcher () {
    const data = ref('initial data')
    const changeCount = ref(0)
    
    watch(data, (old, new) => {
        console.log(old, new)
        changeCount.value ++
    })

    return {
        data,
        changeCount
    }
}

2.使用计算属性（computed）

import {ref, computed} from 'vue'

export function useformatData () {
    const originData = ref('initial data')
    const formatData = computed (() => {
        return originData.value.toUpperCase()
    })
    return {
        originData,
        formatData
    }
}

3.与 Vue Router 交互

// 如果你的项目中使用了 Vue Router，可以在自定义 Hook 中获取路由信息或进行导航操作。
// 首先确保在项目中引入了 Vue Router：

import { useRouter } from 'vue-router' 

export function useRouterLogic () {
    const router = useRouter()
    
    const navigatorToPage = () => {
        router.push('./another-page')
    }

    return {
        navigatorToPage
    }
}

4.与 Pinia（状态管理库）交互

// 假设你使用了 Pinia，可以在自定义 Hook 中获取和操作存储中的状态。
// 首先确保安装并引入了 Pinia：

import { useStore } from 'pinia'

export function useStoreLogic () {
    const store = useStore()

    const incrementStoreValue = () => {
        store.incrementSomeValue()
    }
    
    return {
        incrementStoreValue
    }
}

通过自定义 Hooks，你可以将复杂的逻辑封装起来，使得代码更加清晰、可维护和可复用。同时，自定义 Hooks 也可以帮助你在不同的组件之间共享逻辑，避免重复代码的编写。