vue3 使用provide inject

1. 使用provide inject跨组件传值

在 Vue 中，provide 和 inject 是一对用于实现依赖注入的选项，允许祖先组件向其所有子孙组件传递数据，而不必显式地通过 props 逐级传递。这在处理深层嵌套组件时特别有用。

以下是如何使用 provide 和 inject 的步骤：

1. 在父组件中使用 provide：

<!-- 父组件 -->
<script>
import { provide } from 'vue'

export default {
  setup() {
    // 使用 provide 提供数据
    provide('message', 'Hello from ancestor')
    
    // 也可以提供一个响应式的值
    const count = ref(0)
    provide('count', count)
  }
}
</script>

2. 在子组件中使用 inject：

<!-- 子组件 -->
<script>
import { inject } from 'vue'

export default {
  setup() {
    // 使用 inject 接收数据
    const message = inject('message')
    
    // 接收响应式的值
    const count = inject('count')

    return {
      message,
      count
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <p>Count: {{ count }}</p>
  </div>
</template>

注意事项：

1. provide 和 inject 绑定并不是响应式的。但是，如果你传入了一个响应式对象，那么其属性仍然是响应式的。

2. 你可以在 provide 中使用 readonly 来防止注入的值被修改：

import { readonly, ref } from 'vue'

const count = ref(0)
provide('count', readonly(count))

3. 你可以为注入的值提供一个默认值：

const message = inject('message', 'default value')

4. 在 Vue 3 的组合式 API 中，你也可以在 setup 函数外使用 provide 和 inject：

import { provide, inject } from 'vue'

const MySymbol = Symbol()

provide(MySymbol, 'value')

const value = inject(MySymbol)

使用 provide 和 inject 可以让你在深层嵌套的组件中共享数据，而不需要通过多层 props 传递。但是，这也使得组件之间的依赖关系不那么明显，所以在使用时要谨慎，确保不会滥用。

2. inject接收响应式的值，在ts中用来判断count.value提示value不存在

这个问题通常出现在使用 Vue 3 的组合式 API (Composition API) 时。当你使用 inject 接收一个响应式值时，返回的是一个 Ref 对象，而不是原始值。这就是为什么直接访问 .value 会提示不存在。

解决这个问题有几种方法：

1. 使用 .value 访问值：

如果 count 确实是一个 Ref 对象，你应该能够使用 .value 访问其值。如果报错，可能是因为 TypeScript 或者你的 IDE 无法正确推断类型。

const count = inject('count')
console.log(count.value) // 这应该可以工作

2. 使用 unref 函数：

Vue 3 提供了一个 unref 函数，它可以安全地访问可能是 Ref 的值：

import { unref, inject } from 'vue'

const count = inject('count')
console.log(unref(count)) // 这会返回原始值，无论 count 是否是 Ref

3. 使用响应式 API：

你可以使用 toRef 或 toRefs 来确保得到一个 Ref：

import { toRef, inject } from 'vue'

const count = toRef(inject('count'))
console.log(count.value) // 现在这肯定是一个 Ref

4. 类型断言（如果使用 TypeScript）：

const count = inject('count') as Ref<number>
console.log(count.value)

5. 在模板中使用：

在 Vue 模板中，你不需要使用 .value，Vue 会自动解包 Ref：

<template>
  <div>Count: {{ count }}</div>
</template>

6. 使用 computed：

如果你需要基于注入的值进行计算，可以使用 computed：

import { computed, inject } from 'vue'

const count = inject('count')
const doubleCount = computed(() => unref(count) * 2)

7. 提供默认值：

在 inject 时提供一个默认值，可以帮助推断类型：

const count = inject('count', 0) // 现在 TypeScript 知道这是一个数字

8. 使用 reactive 包装：

如果你需要在多个地方使用这个值，可以考虑用 reactive 包装它：

import { reactive, inject } from 'vue'

const state = reactive({
  count: inject('count')
})

// 现在你可以这样使用
console.log(state.count)

记住，问题的根源可能是在提供值的组件中。确保你正确地提供了一个响应式值：

import { provide, ref } from 'vue'

const count = ref(0)
provide('count', count)

通过这些方法，就应该能够正确地访问和使用通过 inject 接收的响应式值。