如何在 Vue 中优雅地提供和注入多个属性和函数？

vue.js

2024-03-29 20:11:47

在 Vue 中优雅地提供和注入多个属性和函数

问题

在 Vue 中，使用 provide 和 inject API 在组件之间共享状态和函数是常见的做法。但是，当我们需要提供多个相关的状态和函数时，单独提供每个状态和函数会变得繁琐。

解决方法

为了解决这个问题，我们可以使用一个技巧，将所有相关的状态和函数封装到一个对象中，然后将该对象作为单个提供项提供。

步骤

封装状态和函数： 创建一个对象来存储相关的状态和函数。
提供对象： 在提供方组件中，使用 provide 提供该对象。
注入对象： 在注入方组件中，使用 inject 注入该对象。

示例

让我们通过一个示例来展示如何使用这个技巧：

提供方组件

<script setup>
import { ref, provide } from "vue";

const sharedState = {
  isNavClosed: ref(false),
  isHamburgerClosed: ref(false),
  isScroll: ref(false),

  toggleNav() {
    this.isNavClosed.value = !this.isNavClosed.value;
    this.isHamburgerClosed.value = !this.isHamburgerClosed.value;
  },

  enterLeaveNav() {
    if (this.isHamburgerClosed.value) {
      this.isNavClosed.value = !this.isNavClosed.value;
    }
    this.isScroll.value = !this.isScroll.value;
  },
}

provide('sharedState', sharedState)
</script>

注入方组件

<script setup>
import { inject } from "vue";

const { isNavClosed, isHamburgerClosed, isScroll, toggleNav, enterLeaveNav } = inject('sharedState')
</script>