Skip to content

Commit 832752a

Browse files
authored
Translate "guide/composition-api-provide-inject.md"
Translate "guide/composition-api-provide-inject.md"
1 parent a5b12e6 commit 832752a

File tree

1 file changed

+39
-38
lines changed

1 file changed

+39
-38
lines changed

src/guide/composition-api-provide-inject.md

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
# Provide / Inject
1+
# Prover e Injetar Dados
22

3-
> This guide assumes that you have already read [Provide / Inject](component-provide-inject.html), [Composition API Introduction](composition-api-introduction.html), and [Reactivity Fundamentals](reactivity-fundamentals.html).
3+
> Este guia assume que você já leu as seções de [Prover e Injetar Dados](component-provide-inject.html), [Introdução a API de Composição](composition-api-introduction.html) e [Fundamentos de Reatividade](reactivity-fundamentals.html).
44
5-
We can use [provide / inject](component-provide-inject.html) with the Composition API as well. Both can only be called during [`setup()`](composition-api-setup.html) with a current active instance.
5+
Podemos [prover / injetar dados](component-provide-inject.html) com a API de Composição também. Ambos só podem ser chamados durante [`setup()`](composition-api-setup.html)
6+
com uma instância ativa atual.
67

7-
## Scenario Background
8+
## Exemplo de Cenário
89

9-
Let's assume that we want to rewrite the following code, which contains a `MyMap` component that provides a `MyMarker` component with the user's location, using the Composition API.
10+
Vamos supor que queremos reescrever o código a seguir, que contém um componente `MyMap` que provê um componente `MyMarker` com a localização do usuário, usando a API de Composição.
1011

1112
```vue
1213
<!-- src/components/MyMap.vue -->
@@ -22,7 +23,7 @@ export default {
2223
MyMarker
2324
},
2425
provide: {
25-
location: 'North Pole',
26+
location: 'Polo Norte',
2627
geolocation: {
2728
longitude: 90,
2829
latitude: 135
@@ -41,16 +42,16 @@ export default {
4142
</script>
4243
```
4344

44-
## Using Provide
45+
## Usando Provide
4546

46-
When using `provide` in `setup()`, we start by explicitly importing the method from `vue`. This allows us to define each property with its own invocation of `provide`.
47+
Ao usar `provide` em `setup()`, começamos importando explicitamente o método de `vue`. Isso nos permite definir cada propriedade com sua própria invocação de `provide`.
4748

48-
The `provide` function allows you to define the property through two parameters:
49+
A função `provide` permite definir a propriedade por meio de dois parâmetros:
4950

50-
1. The property's name (`<String>` type)
51-
2. The property's value
51+
1. O nome da propriedade (do tipo `<String>`); e
52+
2. O valor da propriedade.
5253

53-
Using our `MyMap` component, our provided values can be refactored as the following:
54+
Usando nosso componente `MyMap`, nossos valores providos podem ser refatorados da seguinte forma:
5455

5556
```vue{7,14-20}
5657
<!-- src/components/MyMap.vue -->
@@ -67,7 +68,7 @@ export default {
6768
MyMarker
6869
},
6970
setup() {
70-
provide('location', 'North Pole')
71+
provide('location', 'Polo Norte')
7172
provide('geolocation', {
7273
longitude: 90,
7374
latitude: 135
@@ -77,16 +78,16 @@ export default {
7778
</script>
7879
```
7980

80-
## Using Inject
81+
## Usando Inject
8182

82-
When using `inject` in `setup()`, we also need to explicitly import it from `vue`. Once we do so, this allows us to invoke it to define how we want to expose it to our component.
83+
Ao usar `inject` em `setup()`, também precisamos importá-lo explicitamente de `vue`. Assim que fizermos isso, isso nos permitirá invocá-lo para definir como queremos expô-lo ao nosso componente.
8384

84-
The `inject` function takes two parameters:
85+
A função `inject` leva dois parâmetros:
8586

86-
1. The name of the property to inject
87-
2. A default value (**Optional**)
87+
1. O nome da propriedade a injetar; e
88+
2. Um valor padrão (**Opcional**).
8889

89-
Using our `MyMarker` component, we can refactor it with the following code:
90+
Usando nosso componente `MyMarker`, podemos refatorá-lo com o seguinte código:
9091

9192
```vue{3,6-14}
9293
<!-- src/components/MyMarker.vue -->
@@ -95,7 +96,7 @@ import { inject } from 'vue'
9596
9697
export default {
9798
setup() {
98-
const userLocation = inject('location', 'The Universe')
99+
const userLocation = inject('location', 'O Universo')
99100
const userGeolocation = inject('geolocation')
100101
101102
return {
@@ -107,13 +108,13 @@ export default {
107108
</script>
108109
```
109110

110-
## Reactivity
111+
## Reatividade
111112

112-
### Adding Reactivity
113+
### Adicionando Reatividade
113114

114-
To add reactivity between provided and injected values, we can use a [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) or [reactive](reactivity-fundamentals.html#declaring-reactive-state) when providing a value.
115+
Para adicionar reatividade entre os valores providos e injetados, podemos usar uma [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) ou [reactive](reactivity-fundamentals.html#declaring-reactive-state) ao prover um valor.
115116

116-
Using our `MyMap` component, our code can be updated as follows:
117+
Usando nosso componente `MyMap`, nosso código pode ser atualizado da seguinte forma:
117118

118119
```vue{7,15-22}
119120
<!-- src/components/MyMap.vue -->
@@ -130,7 +131,7 @@ export default {
130131
MyMarker
131132
},
132133
setup() {
133-
const location = ref('North Pole')
134+
const location = ref('Polo Norte')
134135
const geolocation = reactive({
135136
longitude: 90,
136137
latitude: 135
@@ -143,13 +144,13 @@ export default {
143144
</script>
144145
```
145146

146-
Now, if anything changes in either property, the `MyMarker` component will automatically be updated as well!
147+
Agora, se alguma coisa mudar em qualquer uma das propriedades, o componente `MyMarker` também será atualizado automaticamente!
147148

148-
### Mutating Reactive Properties
149+
### Propriedades de Mutação Reativas
149150

150-
When using reactive provide / inject values, **it is recommended to keep any mutations to reactive properties inside of the _provider_ whenever possible**.
151+
Ao usar dados providos / injetados reativos, **é recomendado manter quaisquer mutações nas propriedades reativas dentro do _provider_ sempre que possível**.
151152

152-
For example, in the event we needed to change the user's location, we would ideally do this inside of our `MyMap` component.
153+
Por exemplo, no caso de precisarmos alterar a localização do usuário, o ideal seria fazer isso dentro de nosso componente `MyMap`.
153154

154155
```vue{28-32}
155156
<!-- src/components/MyMap.vue -->
@@ -166,7 +167,7 @@ export default {
166167
MyMarker
167168
},
168169
setup() {
169-
const location = ref('North Pole')
170+
const location = ref('Polo Norte')
170171
const geolocation = reactive({
171172
longitude: 90,
172173
latitude: 135
@@ -181,14 +182,14 @@ export default {
181182
},
182183
methods: {
183184
updateLocation() {
184-
this.location = 'South Pole'
185+
this.location = 'Polo Sul'
185186
}
186187
}
187188
}
188189
</script>
189190
```
190191

191-
However, there are times where we need to update the data inside of the component where the data is injected. In this scenario, we recommend providing a method that is responsible for mutating the reactive property.
192+
No entanto, há momentos em que precisamos atualizar os dados dentro do componente onde os dados são injetados. Nesse cenário, recomendamos prover um método que seja responsável por transformar a propriedade reativa.
192193

193194
```vue{21-23,27}
194195
<!-- src/components/MyMap.vue -->
@@ -205,14 +206,14 @@ export default {
205206
MyMarker
206207
},
207208
setup() {
208-
const location = ref('North Pole')
209+
const location = ref('Polo Norte')
209210
const geolocation = reactive({
210211
longitude: 90,
211212
latitude: 135
212213
})
213214
214215
const updateLocation = () => {
215-
location.value = 'South Pole'
216+
location.value = 'Polo Sul'
216217
}
217218
218219
provide('location', location)
@@ -230,7 +231,7 @@ import { inject } from 'vue'
230231
231232
export default {
232233
setup() {
233-
const userLocation = inject('location', 'The Universe')
234+
const userLocation = inject('location', 'O Universo')
234235
const userGeolocation = inject('geolocation')
235236
const updateUserLocation = inject('updateLocation')
236237
@@ -244,7 +245,7 @@ export default {
244245
</script>
245246
```
246247

247-
Finally, we recommend using `readonly` on provided property if you want to ensure that the data passed through `provide` cannot be mutated by the injected component.
248+
Por fim, recomendamos o uso de `readonly` na propriedade provida, se você quiser garantir que os dados passados por `provide` não possam sofrer mutação pelo componente injetado.
248249

249250
```vue{7,25-26}
250251
<!-- src/components/MyMap.vue -->
@@ -261,14 +262,14 @@ export default {
261262
MyMarker
262263
},
263264
setup() {
264-
const location = ref('North Pole')
265+
const location = ref('Polo Norte')
265266
const geolocation = reactive({
266267
longitude: 90,
267268
latitude: 135
268269
})
269270
270271
const updateLocation = () => {
271-
location.value = 'South Pole'
272+
location.value = 'Polo Sul'
272273
}
273274
274275
provide('location', readonly(location))

0 commit comments

Comments
 (0)