vue3的api解读-provide inject

目录

什么是context

Provide/Inject和Context

provide inject示例讲解

provide / inject api

/src/examples/ProvideExamples.tsx

---

什么是context

• Context（上下文），是实体间共享的知识。
  • • 举例1：this指针
    • 举例2：浏览器执行环境中的window对象
    • 举例3：前端系统的全局用户登录状态

Provide/Inject和Context

Vue提供上下文的方式

• Provide
  • • 向子组件提供Context
• Inject
  • • 从Context中获取数据

provide inject示例讲解

provide / inject api

• Coding:将Provide / Inject模型为全局提供用户状态

/src/examples/ProvideExamples.tsx

import { defineComponent, provide, inject, reactive } from "vue";
type Theme = {
  color: string
}
export const ProvideExample01 = defineComponent({
  setup() {
    const theme = reactive({
      color: "red"
    })
    provide("theme", theme)
    return () => {
      return (<div>
        <button onClick={() => {
          theme.color = "blue"
        }}>Change Theme to Blue</button>
        <button onClick={() => {
          theme.color = "red"
        }}>Change Theme to Red</button>
        <A />
      </div>
      )
    }
  }
})
const B = defineComponent({ // 子组件
  setup() {
    const theme = inject("theme") as Theme
    return () => {
      return <div style={{
        backgroundColor: theme.color
      }}>
        {theme.color}
      </div>
    }
  }
})
const A = () => { // 父元素
  return <B />
}
function wait(ms: number) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(null)
    }, ms)
  })
}
async function login() {
  await wait(2000)
  return {
    success: true,
    data: null
  }
}
type User = {
  username: string,
  loggedIn: boolean
}
function useUserContext() {
  const user = reactive<User>({
    username: "",
    loggedIn: false
  })
  provide("user", user)
  login().then(() => {
    user.username = "youdao"
    user.loggedIn = true
  })
}
export const ProvideExample02 = defineComponent({
  setup() {
    useUserContext()
    return () => {
      return <div>
        <Header />
        <Content />
      </div>
    }
  }
})
const Header = defineComponent({
  setup() {
    // const user = inject("user") as User
    const user = inject<User>("user")!// !非空断言
    return () => {
      return <header>登录用户——<strong>{user.username}</strong></header>
    }
  }
})
const Content = () => {
  return <div>你好！</div>
}

思考：

1.Provide / Inject的缺点是什么？缺少类型；如provide传的是给string，inject收到的是个unknown

2.可不可以用 Provide / Inject 进行跨组件传参？

                技术上可以，要是参数不是共享的context；语义上不易读。不建议这样用；耦合，违反最小知识原则

3. 如果不用Provide / Inject 我们应该怎么做？可以用发消息