Skip to content

Guide > Composition API > Provide / Inject の翻訳を追従 #286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 27, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/guide/component-provide-inject.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ app.component('todo-list', {

## リアクティブと連携する

前述の例では、リスト `todos` を変更しても、その変更は注入された `todoLength` には反映されません。これは、`provide/inject` の束縛( binding )がデフォルトでリアクティブ _でない_ ことが原因です。`ref` で定義されたプロパティや `reactive` で作成されたオブジェクトを `provide` に渡すことにより、この振る舞いを変更することができます。この場合、祖先コンポーネントをリアクティブにするためには、コンポジション API の `computed` で定義したプロパティを `todoLength` を割り当てる必要があります。
前述の例では、リスト `todos` を変更しても、その変更は注入された `todoLength` には反映されません。これは、`provide/inject` の束縛( binding )がデフォルトでリアクティブ _でない_ ことが原因です。`ref` で定義されたプロパティや `reactive` で作成されたオブジェクトを `provide` に渡すことにより、この振る舞いを変更することができます。この場合、祖先コンポーネントをリアクティブにするためには、Composition API の `computed` で定義したプロパティを `todoLength` を割り当てる必要があります。

```js
app.component('todo-list', {
Expand All @@ -110,4 +110,4 @@ app.component('todo-list', {
})
```

こうすると、`todos.length`へのあらゆる変更が、`todoLength` が注入されたコンポーネントに正しく反映されます。`reactive` の provide/inject の詳細については、[コンポジション API セクション](composition-api-provide-inject.html#injection-reactivity) をご覧ください。
こうすると、`todos.length`へのあらゆる変更が、`todoLength` が注入されたコンポーネントに正しく反映されます。`reactive` の provide/inject の詳細については、[Composition API セクション](composition-api-provide-inject.html#injection-reactivity) をご覧ください。
14 changes: 7 additions & 7 deletions src/guide/composition-api-provide-inject.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Provide / Inject

> このページは、すでに [Provide / Inject](component-provide-inject.html)、[コンポジション API 導入](composition-api-introduction.html)、[リアクティブの基礎](reactivity-fundamentals.html)を読み終えていることを想定しています。
> このページは、すでに [Provide / Inject](component-provide-inject.html)、[Composition API 導入](composition-api-introduction.html)、[リアクティブの基礎](reactivity-fundamentals.html)を読み終えていることを想定しています。

[provide / inject](component-provide-inject.html) は コンポジション API でも使うことができます。どちらも現在アクティブなインスタンスの [`setup()`](composition-api-setup.html) 中にのみ呼び出すことが可能です。
[provide / inject](component-provide-inject.html) は Composition API でも使うことができます。どちらも現在アクティブなインスタンスの [`setup()`](composition-api-setup.html) 中にのみ呼び出すことが可能です。

## シナリオの背景

これから、コンポジション API を使用して、以下のコードを書き直そうとしているとしましょう。以下のコードでは、`MyMap` コンポーネントが `MyMaker` コンポーネントにユーザの位置情報を提供しています。
これから、Composition API を使用して、以下のコードを書き直そうとしているとしましょう。以下のコードでは、`MyMap` コンポーネントが `MyMarker` コンポーネントにユーザの位置情報を提供しています。

```vue
<!-- src/components/MyMap.vue -->
Expand Down Expand Up @@ -36,7 +36,7 @@ export default {
<!-- src/components/MyMarker.vue -->
<script>
export default {
inject: ['location', 'longitude', 'latitude']
inject: ['location', 'geolocation']
}
</script>
```
Expand Down Expand Up @@ -86,7 +86,7 @@ export default {
1. 注入されるプロパティ名
2. デフォルト値 (**任意**)

`MyMaker` コンポーネントは、以下のようにリファクタリングすることができます:
`MyMarker` コンポーネントは、以下のようにリファクタリングすることができます:

```vue{3,6-14}
<!-- src/components/MyMarker.vue -->
Expand All @@ -111,7 +111,7 @@ export default {

### リアクティブの追加

提供された値と注入された値をリアクティブにするには、値を提供する際に [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) または [reactive](reactivity-fundamentals.html#declaring-reactive-state) を使います。
提供された値と注入された値をリアクティブにするには、値を提供する際に [ref](reactivity-fundamentals.html#独立したリアクティブな値を-参照-として作成する) または [reactive](reactivity-fundamentals.html#リアクティブな状態の宣言) を使います。

`MyMap` コンポーネントは、以下のように変更できます:

Expand Down Expand Up @@ -143,7 +143,7 @@ export default {
</script>
```

これで、どちらかのプロパティに何か変更があった場合、`MyMaker` コンポーネントも自動的に更新されるようになります。
これで、どちらかのプロパティに何か変更があった場合、`MyMarker` コンポーネントも自動的に更新されるようになります。

### リアクティブプロパティの変更

Expand Down