You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/composition-api-provide-inject.md
+39-38Lines changed: 39 additions & 38 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,13 @@
1
-
# Provide / Inject
1
+
# Prover e Injetar Dados
2
2
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).
4
4
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.
6
7
7
-
## Scenario Background
8
+
## Exemplo de Cenário
8
9
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.
10
11
11
12
```vue
12
13
<!-- src/components/MyMap.vue -->
@@ -22,7 +23,7 @@ export default {
22
23
MyMarker
23
24
},
24
25
provide: {
25
-
location: 'North Pole',
26
+
location: 'Polo Norte',
26
27
geolocation: {
27
28
longitude: 90,
28
29
latitude: 135
@@ -41,16 +42,16 @@ export default {
41
42
</script>
42
43
```
43
44
44
-
## Using Provide
45
+
## Usando Provide
45
46
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`.
47
48
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:
49
50
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.
52
53
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:
54
55
55
56
```vue{7,14-20}
56
57
<!-- src/components/MyMap.vue -->
@@ -67,7 +68,7 @@ export default {
67
68
MyMarker
68
69
},
69
70
setup() {
70
-
provide('location', 'North Pole')
71
+
provide('location', 'Polo Norte')
71
72
provide('geolocation', {
72
73
longitude: 90,
73
74
latitude: 135
@@ -77,16 +78,16 @@ export default {
77
78
</script>
78
79
```
79
80
80
-
## Using Inject
81
+
## Usando Inject
81
82
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.
83
84
84
-
The `inject`function takes two parameters:
85
+
A função `inject`leva dois parâmetros:
85
86
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**).
88
89
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:
90
91
91
92
```vue{3,6-14}
92
93
<!-- src/components/MyMarker.vue -->
@@ -95,7 +96,7 @@ import { inject } from 'vue'
95
96
96
97
export default {
97
98
setup() {
98
-
const userLocation = inject('location', 'The Universe')
99
+
const userLocation = inject('location', 'O Universo')
99
100
const userGeolocation = inject('geolocation')
100
101
101
102
return {
@@ -107,13 +108,13 @@ export default {
107
108
</script>
108
109
```
109
110
110
-
## Reactivity
111
+
## Reatividade
111
112
112
-
### Adding Reactivity
113
+
### Adicionando Reatividade
113
114
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.
115
116
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:
117
118
118
119
```vue{7,15-22}
119
120
<!-- src/components/MyMap.vue -->
@@ -130,7 +131,7 @@ export default {
130
131
MyMarker
131
132
},
132
133
setup() {
133
-
const location = ref('North Pole')
134
+
const location = ref('Polo Norte')
134
135
const geolocation = reactive({
135
136
longitude: 90,
136
137
latitude: 135
@@ -143,13 +144,13 @@ export default {
143
144
</script>
144
145
```
145
146
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!
147
148
148
-
### Mutating Reactive Properties
149
+
### Propriedades de Mutação Reativas
149
150
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**.
151
152
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`.
153
154
154
155
```vue{28-32}
155
156
<!-- src/components/MyMap.vue -->
@@ -166,7 +167,7 @@ export default {
166
167
MyMarker
167
168
},
168
169
setup() {
169
-
const location = ref('North Pole')
170
+
const location = ref('Polo Norte')
170
171
const geolocation = reactive({
171
172
longitude: 90,
172
173
latitude: 135
@@ -181,14 +182,14 @@ export default {
181
182
},
182
183
methods: {
183
184
updateLocation() {
184
-
this.location = 'South Pole'
185
+
this.location = 'Polo Sul'
185
186
}
186
187
}
187
188
}
188
189
</script>
189
190
```
190
191
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.
192
193
193
194
```vue{21-23,27}
194
195
<!-- src/components/MyMap.vue -->
@@ -205,14 +206,14 @@ export default {
205
206
MyMarker
206
207
},
207
208
setup() {
208
-
const location = ref('North Pole')
209
+
const location = ref('Polo Norte')
209
210
const geolocation = reactive({
210
211
longitude: 90,
211
212
latitude: 135
212
213
})
213
214
214
215
const updateLocation = () => {
215
-
location.value = 'South Pole'
216
+
location.value = 'Polo Sul'
216
217
}
217
218
218
219
provide('location', location)
@@ -230,7 +231,7 @@ import { inject } from 'vue'
230
231
231
232
export default {
232
233
setup() {
233
-
const userLocation = inject('location', 'The Universe')
234
+
const userLocation = inject('location', 'O Universo')
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.
0 commit comments