vue3中一个组件多次使用同一个hooks

Question

公司要求升级技术 ， 被迫把半路出家学的vue3拿上来，封装了一个修改的hooks,大致如下，包含了控制弹窗的布尔值， 关闭弹窗 ， 提交表单以及一个组件实例，

碰巧遇到一个特殊的业务， 一个组件中有三个地方使用修改， 但是每次修改的人员不同，维护的信息也不同，所以就多次调用，我的写法有问题吗？有没有更加简洁的写法？

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue3 中一个组件多次使用同一个 hooks

你遇到的问题是，公司要求升级技术，使用 Vue3 封装了一个修改的 hooks，用于控制弹窗的布尔值、关闭弹窗、提交表单和组件实例。但是，碰巧遇到一个特殊的业务，一个组件中需要多次使用同一个 hooks。

解决方案：

1. 使用 Vue3 的 reactive 对象来存储 hooks 的状态，可以使得多个组件共享同一个 hooks。
2. 使用 Vue3 的 provide 和 inject API来提供和注入 hooks，可以使得多个组件共享同一个 hooks。
3. 使用 Vue3 的 computed 计算属性来计算 hooks 的状态，可以使得多个组件共享同一个 hooks。

例如：

// hooks.js
import { reactive } from 'vue'

const state = reactive({
  isOpen: false,
  form: {}
})

export function useHooks() {
  return {
    isOpen: state.isOpen,
    form: state.form,
    open() {
      state.isOpen = true
    },
    close() {
      state.isOpen = false
    },
    submit() {
      // 提交表单
    }
  }
}

// ComponentA.vue
import { useHooks } from './hooks'

export default {
  setup() {
    const { isOpen, open, close } = useHooks()
    return {
      isOpen,
      open,
      close
    }
  }
}

// ComponentB.vue
import { useHooks } from './hooks'

export default {
  setup() {
    const { isOpen, open, close } = useHooks()
    return {
      isOpen,
      open,
      close
    }
  }
}

在上面的示例中，我们使用 reactive 对象来存储 hooks 的状态，然后使用 provide 和 inject API来提供和注入 hooks。这样，多个组件可以共享同一个 hooks。