Vue跨组件状态共享技巧：从 `provide/inject` 到可组合文件

vue.js

2024-03-08 12:03:05

跨组件共享状态的技巧：从 provide/inject 到可组合文件

在 Vue 中，组件内部使用 provide/inject API 共享状态已经习以为常。但是，当需要在可组合文件或其他可重用代码中使用全局信息时，就需要另辟蹊径。

可组合文件和全局状态管理

全局状态管理库 ，如 Vuex 和 Pinia，为 Vue 应用程序提供了一个集中管理全局状态的解决方案。通过将状态存储在单一来源中，你可以从应用程序的任何地方轻松访问它，包括可组合文件。

使用上下文

Vue 3 中引入的上下文 机制允许访问组件树中上级组件的状态。通过使用 useContext() API，你可以获取一个包含上级组件提供的所有属性的对象。这种方法适用于从可组合文件或嵌套组件中获取全局信息。

利用 ref

ref 是一种 Vue 响应式数据形式，通过 ref() API 创建。你可以创建一个 ref，并将全局信息分配给它，然后在可组合文件或其他可重用代码中使用 unref() API 获取该信息。

示例：使用 ref 提供全局信息

// 在 main.js 中
const app = createApp(App)

app.config.globalProperties.apiUrl = 'http://localhost:3000'

// 在 composable 中
const apiUrl = unref(app.config.globalProperties.apiUrl)

export const fetchApi = () => {
    fetch(`${apiUrl}/whatever`, ...) // <--------- 这里需要 apiUrl
}