-
-
Notifications
You must be signed in to change notification settings - Fork 9.6k
Complete spanish translation #623
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
Closed
Closed
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,4 +4,5 @@ | |
* [2.0 - Русский](ru/) | ||
* [2.0 - 日本語](ja/) | ||
* [2.0 - 한국어(Korean)](kr/) | ||
* [2.0 - Español](es/) | ||
* [1.0 Docs](old/) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
{% include "./SUMMARY.md" %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | ||
- [Modo estricto](strict.md) | ||
- [Manejo de formularios](forms.md) | ||
- [Testeo](testing.md) | ||
- [Recarga en caliente](hot-reload.md) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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?