在開發 Web 應用程序時，狀態管理是一個非常重要的方面。狀態管理是確保應用程序始終處于一致狀態的過程，無論何時用戶與應用程序進行交互或發生事件。Vue.js 是一個非常流行的前端框架，它提供了許多工具來管理不同組件之間的狀態。而 Vue 3 中一個新的 Hook —— useContext，可以幫助我們更好的共享狀態。

使用 Vue 3 的 useContext 鉤子，我們可以在應用程序的不同部分之間以一種簡單、干凈的方式共享狀態。這個鉤子可以讓我們跨級訪問父組件的內容，這意味著我們可以在子組件中獲取父組件的數據，而不必通過 props 傳遞。

import { createContext, useContext } from 'vue'
const MyContext = createContext('defaultValue')
export default {
setup () {
const contextValue = useContext(MyContext)
return {
contextValue
}
}
}

首先，我們需要先導入 createContex 和 useContext，然后在使用 useContext 的組件外面定義一個 context。我們可以在 createContext 函數中定義一個默認值，當組件沒有匹配到相應的 Provider 組件時，它將使用 createContext 提供的默認值。

當我們使用 useContext 鉤子時，它會自動在所有祖先組件中查找最近的與上下文匹配的 Provider 組件，并返回 Provider 組件的值。

import Provider from './MyProvider.vue'
import MyComponent from './MyComponent.vue'
export default {
components: {
Provider,
MyComponent
},
template: `
`
}

在這個例子中，我們定義了一個名為 MyProvider.vue 的組件來提供一個 context，然后在 main.js 文件中使用 Provider 組件來包含 MyComponent.vue 組件。這樣，MyComponent.vue 組件就可以通過 useContext 鉤子訪問 MyProvider.vue 組件提供的 context 值。

使用 useContext 鉤子非常方便，特別是在需要訪問祖先組件中存儲的數據時。它可以讓我們在 Vue 應用程序中更好地管理我們的狀態，并將處理邏輯分配到正確的組件中。

總的來說，Vue 3 提供了一種更加清新、簡便、快速和強大的組件之間通訊方式，也為 Vue 開發者創造出了更多的可能性。