Skip to content

Commit 667ef7b

Browse files
committed
docs: update provide/inject section
1 parent 44a4a6c commit 667ef7b

File tree

2 files changed

+40
-9
lines changed

2 files changed

+40
-9
lines changed

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -268,9 +268,9 @@ import { provide } from 'vue'
268268

269269
provide(THEME_KEY, 'dark')
270270

271-
// or provide a reactive state
271+
// or provide a ref
272272
const theme = ref('dark')
273-
provide(THEME_KEY, computed(() => theme.value))
273+
provide(THEME_KEY, theme)
274274

275275
// getter is also supported
276276
provide(THEME_KEY, () => theme.value)

README.zh-Hans.md

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -257,22 +257,53 @@ Vue-ECharts 支持如下事件:
257257

258258
### Provide / Inject
259259

260-
Vue-ECharts 为 `theme``init-options``update-options``loading-options` 提供了 provide/inject API,以通过上下文配置选项。例如:可以通过如下方式来使用 provide API 为 `init-options` 提供上下文配置:
260+
Vue-ECharts 为 `theme``init-options``update-options``loading-options` 提供了 provide/inject API,以通过上下文配置选项。例如:可以通过如下方式来使用 provide API 为 `theme` 提供上下文配置:
261261

262262
<details>
263-
<summary>Vue 3</summary>
263+
<summary>组合式 API</summary>
264264

265265
```js
266266
import { THEME_KEY } from 'vue-echarts'
267267
import { provide } from 'vue'
268268

269-
// 组合式 API
270269
provide(THEME_KEY, 'dark')
271270

272-
// 选项式 API
273-
{
274-
provide: {
275-
[THEME_KEY]: 'dark'
271+
// or provide a ref
272+
const theme = ref('dark')
273+
provide(THEME_KEY, theme)
274+
275+
// getter is also supported
276+
provide(THEME_KEY, () => theme.value)
277+
```
278+
279+
</details>
280+
281+
<details>
282+
<summary>选项式 API</summary>
283+
284+
```js
285+
import { THEME_KEY } from 'vue-echarts'
286+
import { computed } from 'vue'
287+
288+
export default {
289+
{
290+
provide: {
291+
[THEME_KEY]: 'dark'
292+
}
293+
}
294+
}
295+
296+
// Or make injections reactive
297+
export default {
298+
data() {
299+
return {
300+
theme: 'dark'
301+
}
302+
},
303+
provide() {
304+
return {
305+
[THEME_KEY]: computed(() => this.theme)
306+
}
276307
}
277308
}
278309
```

0 commit comments

Comments
 (0)