Skip to content
Closed
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
1 change: 1 addition & 0 deletions docs/LANGS.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@
* [2.0 - Русский](ru/)
* [2.0 - 日本語](ja/)
* [2.0 - 한국어(Korean)](kr/)
* [2.0 - Español](es/)
* [1.0 Docs](old/)
1 change: 1 addition & 0 deletions docs/es/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% include "./SUMMARY.md" %}
22 changes: 22 additions & 0 deletions docs/es/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Vuex

> Nota: Esta es la documentación para vuex@2.x.

- [¿Buscando la documentación de la versión 1.0?](https://github.com/vuejs/vuex/tree/1.0/docs)
- [Notas de lanzamiento](https://github.com/vuejs/vuex/releases)
- [Instalación](installation.md)
- [¿Qué es Vuex?](intro.md)
- [Primeros pasos](getting-started.md)
- Conceptos principales
- [Estado](state.md)
- [Getters](getters.md)
- [Mutaciones](mutations.md)
- [Acciones](actions.md)
- [Módulos](modules.md)
- [Estructura de la aplicación](structure.md)
- [Complementos](plugins.md)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no es mejor guardar el término plugins?

- [Modo estricto](strict.md)
- [Manejo de formularios](forms.md)
- [Testeo](testing.md)
- [Recarga en caliente](hot-reload.md)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Creo que deberiamos guardar hot reload tambien. Si busco recarga en caliente en Google no encuentro nada

- [Documentación de la API](api.md)
174 changes: 174 additions & 0 deletions docs/es/actions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
# Acciones

Las acciones son similares a las mutaciones, con la diferencia que:

- En lugar de modificar el estado, las acciones emiten mutaciones.
- Las acciones pueden contener operaciones asíncronas.

Registremos una acción simple:

``` js
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
```

Las funciones controladoras de las acciones reciben un objeto de contexto, el cual expone el mismo conjunto de métodos/propiedades encontrados en la instancia del _store_, por lo que puedes ejecutar `context.commit` para emitir una mutación, o acceder al estado y _getters_ a través de `context.state` y `context.getters`. Veremos por qué este objeto de contexto no es la instancia propiamente dicha cuando introduzcamos los [módulos](modules.md) más adelante.

En la práctica, normalmente utilizamos la [desestructuración de argumentos de ES2015](https://github.com/lukehoban/es6features#destructuring) para simplificar un poco el código (especialmente cuando necesitamos ejecutar `commit` muchas veces):

``` js
actions: {
increment ({ commit }) {
commit('increment')
}
}
```

### Enviando acciones

Las acciones son disparadas con el método `store.dispatch`:

``` js
store.dispatch('increment')
```

Esto puede parecer tonto a primera vista: si queremos incrementar el contador, ¿por qué no ejecutamos directamente `store.commit('increment')`? Bueno, ¿recuerdas que **las mutaciones deben ser síncronas**? Las acciones no. Podemos realizar operacions **asíncronas** dentro de las acciones:

``` js
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
```

Las acciones soportan el mismo formato de parámetros adicionales e información extra con el formato de objetos:

``` js
// envio con parámtros adicionales
store.dispatch('incrementAsync', {
amount: 10
})

// envio con un objeto
store.dispatch({
type: 'incrementAsync',
amount: 10
})
```

Un ejemplo más cercano al mundo real sería una acción para verificar un carrito de compras, lo cual involucaría **llamadas a una API asíncrona** y **emitir múltiples mutaciones**:

``` js
actions: {
checkout ({ commit, state }, products) {
// guardar los elementos que se encuentran actualmente en el carrito
const savedCartItems = [...state.cart.added]
// enviar pedidos de verificación y limpiar el carrito
commit(types.CHECKOUT_REQUEST)
// la API de la tienda acepta _callbacks_ en caso de éxito y falla
shop.buyProducts(
products,
// manejamos el éxito
() => commit(types.CHECKOUT_SUCCESS),
// manejamos la falla
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}
```

Nota que estamos utilizando un flujo de operaciones asíncronas y registrando los efectos colaterales (mutaciones de estado) de la acción cuando las emitimos.

### Enviando acciones dentro de componentes

Puedes enviar acciones dentro de los componentes con `this.$store.dispatch('xxx')`, o usando la función auxiliar `mapActions` la cual mapea métodos del componente a llamadas a `store.dispatch` (requiere haber inyectado el `store` en la instancia principal):

``` js
import { mapActions } from 'vuex'

export default {
// ...
methods: {
...mapActions([
'increment' // mapea this.increment() a this.$store.dispatch('increment')
]),
...mapActions({
add: 'increment' // mapea this.add() a this.$store.dispatch('increment')
})
}
}
```

### Componiendo acciones

Las acciones son usualmente asíncronas entonces, ¿cómo sabemos cuando una acción finalizó? Y más importante, ¿cómo componemos múltiples acciones juntas para manejar un flujo asíncrono complejo?

Lo primero que debes saber es que `store.dispatch` puede manejar una _Promise_ devuelta por la función controladora de la acción ejecutada y también devuelve una _Promise_:

``` js
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
```

Ahora puedes hacer:

``` js
store.dispatch('actionA').then(() => {
// ...
})
```

Y también, en otra acción:

``` js
actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
```

Finalmente, si usamos [async / await](https://tc39.github.io/ecmascript-asyncawait/), una característica de JavaScript que llegará pronto, podemos componer nuestras acciones de la siguiente manera:

``` js
// asumiendo que getData() y getOtherData() devuelven Promises

actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // wait for actionA to finish
commit('gotOtherData', await getOtherData())
}
}
```

> Es posible que una llamada a `store.dispatch` dispare múltiples funciones controladoras de acciones en diferentes módulos. En ese caso, el valor retornado será una _Promise_ que se resuelve cuando todas estas funciones han sido resueltas.
186 changes: 186 additions & 0 deletions docs/es/api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
# Referencia de la API

### Vuex.Store

``` js
import Vuex from 'vuex'

const store = new Vuex.Store({ ...options })
```

### Vuex.Store Constructor Options

- **state**

- tipo: `Object`

El objeto de estado principal del _store_ de Vuex.

[Detalles](state.md)

- **mutations**

- tipo: `{ [type: string]: Function }`

Registra mutaciones en el _store_. La función controladora siempre recibe `state` como primer parámetro (será el estado local de un módulo si se define dentro de este), y como segundo parámetro `payload` si es que existe.

[Detalles](mutations.md)

- **actions**

- tipo: `{ [type: string]: Function }`

Registra acciones en el _store. La función controladora recibe un objeto `context` que expone las siguientes propiedades:

``` js
{
state, // lo mismo que store.state, o el estado local si se encuentra dentro de un módulo
rootState, // lo mismo que store.state, solo en módulos
commit, // lo mismo que store.commit
dispatch, // lo mismo que store.dispatch
getters // lo mismo que store.getters
}
```

[Detalles](actions.md)

- **getters**

- tipo: `{ [key: string]: Function }`

Registra _getters_ en el _store. La función _getter_ recibe los siguientes parámetros:

```
state, // será el estado local del módulo si se encuentra dentro de uno
getters, // lo mismo que store.getters
rootState // lo mismo que store.state
```
Los _getters_ registrados son expuestos como `store.getters`.

[Detalles](getters.md)

- **modules**

- tipo: `Object`

Un objeto que contiene los sub módulos a ser fusionados dentro del _store_, de la forma:

``` js
{
key: {
state,
namespaced?,
mutations?,
actions?,
getters?,
modules?
},
...
}
```

Cada módulo puede contener `state` y `mutations` similares a las opciones globales. El estado de un módulo será agregado al estado del _store_ global usando la llave del módulo. Las mutaciones y _getters_ del módulo reciben el estado local del mismo como primer parámetro en lugar del estado global, y el `context.state` de las acciones del módulo también apuntaran al estado local.

[Detalles](modules.md)

- **plugins**

- tipo: `Array<Function>`

Un arreglo de funciones complemento para ser aplicadas al _store_. El complemento solo recibe el _store_ como argumento y puede tanto escuchar mutaciones (para persistencia de datos saliente, registro o depuración) como emitir mutaciones (para datos entrantes, por ejemplo, websockets u observables).

[Detalles](plugins.md)

- **strict**

- tipo: `Boolean`
- valor por defecto: `false`

Fuerza al _store_ de Vuex a funcionar en modo estricto. Es este modo, cualquier modificación al estado de Vuex fuera de una mutación lanzará un error.

[Detalles](strict.md)

### Propiedades de instancia de Vuex.Store

- **state**

- tipo: `Object`

El estado raiz. Solo lectura.

- **getters**

- tipo: `Object`

Expone _getters_ registrados. Solo lectura.

### Métodos de instancia de Vuex.Store

- **`commit(type: string, payload?: any) | commit(mutation: Object)`**

Emite una mutación. [Detalles](mutations.md)

- **`dispatch(type: string, payload?: any) | dispatch(action: Object)`**

Envia una acción. Devuelve una _Promise_ que resuelve todas las funciones controladoras de acciones disparadas. [Detalles](actions.md)

- **`replaceState(state: Object)`**

Reemplaza el estado global del _store_. Use this only for state hydration / time-travel purposes.

- **`watch(getter: Function, cb: Function, options?: Object)`**

Observa reactivamente el valor de retorno de una función _getter_ y ejecuta la _callback_ cuando el valor cambia. El _getter_ recibe el estado del _store_ como único parámetro. Acepta opcionalmente un objeto de opciones similar al del método `vm.$watch` de Vue.

Para dejar de observar, ejecuta la función controladora devuelta.

- **`subscribe(handler: Function)`**

Suscribe a mutaciones del _store_. `handler` es ejecutada luego de cada mutación y recibe al descriptor de la mutación y al estado luego de la mutación como parámetros:

``` js
store.subscribe((mutation, state) => {
console.log(mutation.type)
console.log(mutation.payload)
})
```

Usado mayormente en complementos. [Detalles](plugins.md)

- **`registerModule(path: string | Array<string>, module: Module)`**

Registra un módulo dinámico. [Detalles](modules.md#dynamic-module-registration)

- **`unregisterModule(path: string | Array<string>)`**

Quita del registro un módulo dinámico. [Detalles](modules.md#dynamic-module-registration)

- **`hotUpdate(newOptions: Object)`**

Intercambia en caliente nuevas acciones y mutaciones. [Detalles](hot-reload.md)

### Funciones auxiliares de enlace de componentes

- **`mapState(namespace?: string, map: Array<string> | Object): Object`**

Crea opciones de componentes computadas que devuelven el sub-árbol del _store_ de Vuex. [Detalles](state.md#the-mapstate-helper)

El primer parámetro puede opcionalmente ser una cadena de texto con un espacio de nombres. [Detalles](modules.md#binding-helpers-with-namespace)

- **`mapGetters(namespace?: string, map: Array<string> | Object): Object`**

Crea opciones de componentes computadas que devuelven el valor evaluado de un _getter_. [Detalles](getters.md#the-mapgetters-helper)

El primer parámetro puede opcionalmente ser una cadena de texto con un espacio de nombres. [Detalles](modules.md#binding-helpers-with-namespace)

- **`mapActions(namespace?: string, map: Array<string> | Object): Object`**

Crea métodos de componentes que envian una accion. [Detalles](actions.md#dispatching-actions-in-components)

El primer parámetro puede opcionalmente ser una cadena de texto con un espacio de nombres. [Detalles](modules.md#binding-helpers-with-namespace)

- **`mapMutations(namespace?: string, map: Array<string> | Object): Object`**

Crea métodos de componente que emiten una mutación. [Detalles](mutations.md#commiting-mutations-in-components)

El primer parámetro puede opcionalmente ser una cadena de texto con un espacio de nombres. [Detalles](modules.md#binding-helpers-with-namespace)
Loading