Vue 3 的 provide / inject 用法

最近在写一个 Vue 3 项目，使用到了 provide / inject，因此做一个学习记录。

需求：点击顶部栏的 logo 对侧边栏的显示或隐藏进行切换。

思路：

1. 需要一个变量来记录侧边栏的显示或隐藏.
2. 变量即不能放在顶部栏也不能放在侧边栏，因为在两个组件是无法互相进行访问。
3. 放哪里？他们的祖先：App.vue。

步骤

• 在 App.vue 中使用 provide 来标记变量，
• 在 侧边栏、顶部栏 使用 inject 可以访问到变量

// App.vue
<script lang="ts">
import { provide, ref } from 'vue'
export default {
  name: 'App',
  setup(){
    const menuVisible = ref(true)
    provide('menuVisible',menuVisible)
  }
}
</script>

顶部栏

<script lang="ts">
import { inject, Ref } from "vue";
export default {
  setup() {
    const menuVisible = inject<Ref<boolean>>("menuVisible");		// <Ref<boolean>> 标明类型
    const toggleMenu = () => {
      menuVisible.value = !menuVisible.value;
    };
    return { toggleMenu };
  },
};
</script>

provide / inject

• 在父组件中使用 provide 标记该变量可以被所有后代访问，无论多少层
• 在子组件中使用 inject 可以访问到变量