Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[feature/composition-api-provide-inject] Translate composition api pr… #12

Open
wants to merge 1 commit into
base: feature/composition-api-lifecycle-hooks
Choose a base branch
from
Open

[feature/composition-api-provide-inject] Translate composition api pr… #12

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
70 changes: 35 additions & 35 deletions src/guide/composition-api-provide-inject.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Provide / Inject

> 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).
> Esta guía asume que usted ya leyo [Provide / Inject](component-provide-inject.html), la [Introducción de la API de Composición](composition-api-introduction.html), [Fundamentos de la Reactividad](reactivity-fundamentals.html).

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.
También podemos utilizar [provide / inject](component-provide-inject.html) con la API de Composición. Ambos solo pueden ser invocados durante el [`setuo()`](composition-api-setup.html) con una instance activa.

## Scenario Background
## Explicación del Escenario

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.
Asumamos que queremos reescribir el siguiente código utilizando la API de Composición, el cual contiene un componente `MyMap` que contiene un componente `MyMarker` con la ubicación del usuario.

```vue
<!-- src/components/MyMap.vue -->
Expand All @@ -22,7 +22,7 @@ export default {
MyMarker
},
provide: {
location: 'North Pole',
location: 'Polo Norte',
geolocation: {
longitude: 90,
latitude: 135
Expand All @@ -41,16 +41,16 @@ export default {
</script>
```

## Using Provide
## Utilizando Provide

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`.
Cuando se utiliza `provide` dentro de `setup()`, comenzamos importando este método desde `Vue` de forma explícita. Esto nos permite definir cada propiedad con su propia invocación de `provide`.

The `provide` function allows you to define the property through two parameters:
La función `provide` le permite definir la propiedad a través de dos parámetros:

1. The property's name (`<String>` type)
2. The property's value
1. El nombre de la propiedad (de tipo `<String>`)
2. El valor de la propiedad

Using our `MyMap` component, our provided values can be refactored as the following:
Utilizando nuestro componente `MyMap`, nuestro valores _provided_ pueden ser refactorizados de la siguiente forma:

```vue{7,14-20}
<!-- src/components/MyMap.vue -->
Expand All @@ -67,7 +67,7 @@ export default {
MyMarker
},
setup() {
provide('location', 'North Pole')
provide('location', 'Polo Norte')
provide('geolocation', {
longitude: 90,
latitude: 135
Expand All @@ -77,16 +77,16 @@ export default {
</script>
```

## Using Inject
## Utilizando Inject

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.
Cuando se utilizada `inject` dentro de `setuo()`, también debemos importarlo desde `Vue` de forma explícita. Una vez que lo hagamos, nos permitirá invocarlo para definir como queremos exponerlo a nuestro componente.

The `inject` function takes two parameters:
La función `inject` recibe dos parámetros:

1. The name of the property to inject
2. A default value (**Optional**)
1. El nombre de la propiedad a inyectar
2. Un valor por defecto (**Opcional**)

Using our `MyMarker` component, we can refactor it with the following code:
Utilizando nuestro componente `MyMarker`, podemos refactorizar nuestro código de la siguiente forma:

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

## Reactivity
## Reactividad

### Adding Reactivity
### Agregando Reactividad

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.
Para añandir reactividad entre valores _provided_ e _injected_, podemos utilizar [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) o [reactive](reactivity-fundamentals.html#declaring-reactive-state) cuando proveemos un valor.

Using our `MyMap` component, our code can be updated as follows:
Utilizando nuestro componente `MyMAp`, podemos actualizar nuestro código de siguiente forma:

```vue{7,15-22}
<!-- src/components/MyMap.vue -->
Expand All @@ -130,7 +130,7 @@ export default {
MyMarker
},
setup() {
const location = ref('North Pole')
const location = ref('Polo Norte')
const geolocation = reactive({
longitude: 90,
latitude: 135
Expand All @@ -143,13 +143,13 @@ export default {
</script>
```

Now, if anything changes in either property, the `MyMarker` component will automatically be updated as well!
Ahora, si algo cambia en cualquiera de las propiedades, el componente `MyMaker` también se actualizará automáticamente!

### Mutating Reactive Properties
### Mutando Propiedades Reactivas

When using reactive provide / inject values, **it is recommended to keep any mutations to reactive properties inside of the _provider_ whenever possible**.
Al usar valores _provide_ / _inject_ reactivos, **se recomienda que las mutaciones a propiedades reactivas se realicen dentro del _provider_ siempre que sea posible**.

For example, in the event we needed to change the user's location, we would ideally do this inside of our `MyMap` component.
Por ejemplo, en el evento necesitabamos cambiar la ubicación del usuario, idealmente haríamos esto dentro del componente `MyMap`.

```vue{28-32}
<!-- src/components/MyMap.vue -->
Expand All @@ -166,7 +166,7 @@ export default {
MyMarker
},
setup() {
const location = ref('North Pole')
const location = ref('Polo Norte')
const geolocation = reactive({
longitude: 90,
latitude: 135
Expand All @@ -181,14 +181,14 @@ export default {
},
methods: {
updateLocation() {
this.location = 'South Pole'
this.location = 'Polo Sur'
}
}
}
</script>
```

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.
Sin embargo, hay ocasiones en los que necesita actualizar la información dentro del componente en el que la misma fue inyectada. En este escenario, recomendamos proveer un método que sea responsable de mutar la propiedad reactiva.

```vue{21-23,27}
<!-- src/components/MyMap.vue -->
Expand All @@ -205,14 +205,14 @@ export default {
MyMarker
},
setup() {
const location = ref('North Pole')
const location = ref('Polo Norte')
const geolocation = reactive({
longitude: 90,
latitude: 135
})

const updateLocation = () => {
location.value = 'South Pole'
location.value = 'Polo Sur'
}

provide('location', location)
Expand Down Expand Up @@ -244,7 +244,7 @@ export default {
</script>
```

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.
Finalmente, recomendamos el uso de la propiedad `readonly` si usted quiere asegurarse que la información pasada a través de `provide` no pueda ser mutada por el componente inyectado.

```vue{7,25-26}
<!-- src/components/MyMap.vue -->
Expand All @@ -261,14 +261,14 @@ export default {
MyMarker
},
setup() {
const location = ref('North Pole')
const location = ref('Polo Norte')
const geolocation = reactive({
longitude: 90,
latitude: 135
})

const updateLocation = () => {
location.value = 'South Pole'
location.value = 'Polo Sur'
}

provide('location', readonly(location))
Expand Down