Vue.js: provide / inject

<!-- ❌ The "Broken" Version: 5-Layer prop drilling -->
<!-- App.vue -->
<Layout :theme="theme" :user="user" :locale="locale">
  <router-view />
</Layout>

<!-- Layout.vue -->
<Header :theme="theme" :user="user" :locale="locale" />

<!-- Header.vue -->
<UserMenu :theme="theme" :user="user" :locale="locale" />

<!-- UserMenu.vue -->
<ThemeButton :theme="theme" />
<LocaleSelector :locale="locale" />

<!-- App.vue Ancestors -->
<script setup>
import { ref, provide } from 'vue'

const theme = ref('light')
const user = ref({ name: 'Alice' })
const locale = ref('zh-CN')

// ✅ Once provide,All descendants may inject
provide('theme', theme)
provide('user', user)
provide('locale', locale)
</script>

<!-- UserMenu.vue Any descendant at any depth -->
<script setup>
import { inject } from 'vue'

// ✅ Get it directly, No props passthrough needed
const theme = inject('theme')
const user = inject('user')
const locale = inject('locale')
</script>

<template>
  <button :class="theme">Toggle {{ user.name }}</button>
  <p>{{ locale }}</p>
</template>

<!-- App.vue Ancestor Components -->
<script setup>
import { ref, provide } from 'vue'

const theme = ref('light')
const user = { name: 'Alice' }

// 1. Inject a static value
provide('appName', 'My Admin')

// 2. Injecting Responsive Data(ref)
provide('theme', theme)

// 3. Injecting Responsive Data(reactive)
provide('user', user)

// 4. Injection Methods
provide('updateUser', (newUser) => {
  user.value = newUser
})
</script>

<!-- Child.vue Any descendant component -->
<script setup>
import { inject } from 'vue'

// 1. Basic Reception
const theme = inject('theme')

// 2. With default values(My ancestors are no longer with us provide When to Use)
const theme = inject('theme', 'light')

// 3. Include factory function defaults
const theme = inject('theme', () => 'light')

// 4. Type Assertion(TypeScript)
const theme = inject<string>('theme', 'light')
</script>

<!-- Ancestor.vue -->
<script setup>
import { ref, provide } from 'vue'

const count = ref(0)
const user = reactive({ name: 'Alice', age: 25 })

provide('count', count)        // ref
provide('user', user)          // reactive
provide('config', { theme: 'dark' })  // Object
provide('reset', () => { count.value = 0 })  // Methods
</script>

<!-- DeepChild.vue(Any depth) -->
<script setup>
import { inject } from 'vue'

const count = inject('count')        // Responsive
const user = inject('user')          // Responsive
const config = inject('config')      // Ordinary Object
const reset = inject('reset')        // Function

// Edit
function increment() {
  count.value++  // ✅ Ancestor components will also respond
}
</script>

<!-- keys.js - Centrally manage all provide key -->
<script>
export const THEME_KEY = Symbol('theme')
export const USER_KEY = Symbol('user')
export const LOCALE_KEY = Symbol('locale')
export const CONFIG_KEY = Symbol('config')
</script>

<!-- Ancestor.vue Ancestor Components -->
<script setup>
import { provide, ref } from 'vue'
import { THEME_KEY, USER_KEY, LOCALE_KEY } from './keys'

provide(THEME_KEY, ref('light'))
provide(USER_KEY, ref({ name: 'Alice' }))
provide(LOCALE_KEY, ref('zh-CN'))
</script>

<!-- DeepChild.vue Any descendants -->
<script setup>
import { inject } from 'vue'
import { THEME_KEY } from './keys'

// ✅ Type Safety:Must use Symbol talent inject
const theme = inject(THEME_KEY)
const user = inject(USER_KEY)
</script>

<!-- Ancestor.vue -->
<script setup>
import { ref, reactive, provide } from 'vue'

// 1. Inject ref(Responsive)
const count = ref(0)
provide('count', count)

// 2. Inject reactive(Responsive)
const user = reactive({ name: 'Alice' })
provide('user', user)

// 3. Injecting Read-Only Objects(Non-responsive)
const config = { theme: 'dark' }
provide('config', config)
</script>

<!-- Method 1:Directly Modify Ancestors(Recommendations) -->
<!-- Ancestor.vue -->
<script setup>
import { ref, provide } from 'vue'

const theme = ref('light')
provide('theme', theme)

function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>

<!-- Method 2:Through their descendants inject Edit Citation -->
<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue'

const theme = inject('theme')

function toggleTheme() {
  theme.value = 'dark'  // ✅ The change is ref,Both the ancestors and other descendants responded
}
</script>

// keys.js
export const THEME_KEY = Symbol('theme')

<!-- App.vue Ancestors -->
<script setup>
import { ref, provide } from 'vue'
import { THEME_KEY } from './keys'

const theme = ref('light')
provide(THEME_KEY, theme)
</script>

<!-- ThemeButton.vue Descendants -->
<script setup>
import { inject } from 'vue'
import { THEME_KEY } from './keys'

const theme = inject(THEME_KEY)
</script>

<template>
  <button @click="theme.value = theme === 'light' ? 'dark' : 'light'">
    {{ theme === 'light' ? '🌞' : '🌙' }}
  </button>
</template>

// keys.js
export const AUTH_KEY = Symbol('auth')

<!-- App.vue -->
<script setup>
import { reactive, provide } from 'vue'
import { AUTH_KEY } from './keys'

const auth = reactive({
  user: null,
  isLoggedIn: false,
  login(credentials) { /* API call */ },
  logout() { this.user = null; this.isLoggedIn = false }
})
provide(AUTH_KEY, auth)
</script>

<!-- UserMenu.vue Descendants -->
<script setup>
import { inject } from 'vue'
import { AUTH_KEY } from './keys'

const auth = inject(AUTH_KEY)
</script>

<template>
  <div v-if="auth.isLoggedIn">{{ auth.user.name }}</div>
  <button v-else @click="auth.login(creds)">Login</button>
</template>

// keys.js
export const I18N_KEY = Symbol('i18n')

<!-- App.vue -->
<script setup>
import { ref, provide, computed } from 'vue'
import { I18N_KEY } from './keys'

const messages = {
  'zh-CN': { hello: 'Hello', welcome: 'Welcome' },
  'en-US': { hello: 'Hello', welcome: 'Welcome' }
}

const locale = ref('zh-CN')
const t = computed(() => (key) => messages[locale.value][key])

provide(I18N_KEY, { locale, t })
</script>

<!-- Hello.vue Descendants -->
<script setup>
import { inject } from 'vue'
import { I18N_KEY } from './keys'

const { t } = inject(I18N_KEY)
</script>

<template>
  <h1>{{ t('hello') }}, {{ t('welcome') }}</h1>
</template>

<!-- App.vue -->
<script setup>
import { ref, provide } from 'vue'

const loading = ref(false)
provide('loading', loading)
</script>

<!-- AnyComponent.vue Descendants -->
<script setup>
import { inject } from 'vue'
const loading = inject('loading')

async function fetchData() {
  loading.value = true
  await fetch('/api/data')
  loading.value = false
}
</script>

<template>
  <button @click="fetchData">Refresh</button>
</template>

<!-- App.vue -->
<script setup>
import { ref, reactive, provide } from 'vue'

const appState = reactive({
  theme: 'light',
  user: { name: 'Alice' },
  permissions: ['read', 'write'],
  config: { sidebar: true }
})
provide('appState', appState)
</script>

// src/keys.js
export const THEME_KEY = Symbol('theme')
export const USER_KEY = Symbol('user')
export const LOCALE_KEY = Symbol('locale')
export const CART_KEY = Symbol('cart')

<!-- src/App.vue -->
<script setup>
import { ref, reactive, provide, readonly } from 'vue'
import { THEME_KEY, USER_KEY, LOCALE_KEY, CART_KEY } from './keys'

// Topic
const theme = ref('light')
function setTheme(newTheme) {
  theme.value = newTheme
  localStorage.setItem('theme', newTheme)
}

// User
const user = reactive({
  id: 1,
  name: 'Alice',
  role: 'admin'
})

// Internationalization
const locale = ref('zh-CN')
const messages = {
  'zh-CN': { home: 'Home', cart: 'Shopping Cart' },
  'en-US': { home: 'Home', cart: 'Cart' }
}
const t = (key) => messages[locale.value][key]

// Shopping Cart
const cart = reactive({ items: [], total: 0 })

// Disposable provide 4 Global state
provide(THEME_KEY, { theme, setTheme })
provide(USER_KEY, { user })
provide(LOCALE_KEY, { locale, t })
provide(CART_KEY, { cart })
</script>

<template>
  <router-view />
</template>

<!-- DeepChild.vue Any depth -->
<script setup>
import { inject } from 'vue'
import { THEME_KEY, USER_KEY, LOCALE_KEY, CART_KEY } from './keys'

// 1. Deconstruction
const { theme, setTheme } = inject(THEME_KEY)
const { user } = inject(USER_KEY)
const { locale, t } = inject(LOCALE_KEY)
const { cart } = inject(CART_KEY)
</script>

<template>
  <div :class="['app', theme]">
    <p>{{ user.name }} ({{ user.role }})</p>
    <p>{{ t('home') }} | {{ t('cart') }}</p>
    <p>{{ cart.items.length }} items, ${{ cart.total }}</p>
    
    <button @click="setTheme('dark')">Dark Mode</button>
  </div>
</template>

// src/keys.js
export const THEME_KEY = Symbol('theme')  // The Only One
export const ANOTHER_THEME_KEY = Symbol('theme')  // Also the only one(Different Symbol)

<!-- App.vue -->
<script setup>
import { provide, ref } from 'vue'
import { THEME_KEY, ANOTHER_THEME_KEY } from './keys'

const theme1 = ref('light')
const theme2 = ref('dark')

// ✅ There will be no conflict:Different Symbol Even if the names are the same
provide(THEME_KEY, theme1)
provide(ANOTHER_THEME_KEY, theme2)
</script>