|
| 1 | +# Acciones |
| 2 | + |
| 3 | +> Acciones en Vuex son de hecho "creadores de acción" en las definiciones de vanilla flux, pero encuentro ese término más confuso que útil. |
| 4 | +
|
| 5 | +Acciones son simplemente funciones que despachan mutaciones. Por convenio, las acciones de Vuex siempre esperan una instancia del almacén como su primer argumento, seguido por argumentos adicionales opcionales. |
| 6 | + |
| 7 | +``` js |
| 8 | +// la acción más simple |
| 9 | +function increment (store) { |
| 10 | + store.dispatch('INCREMENT') |
| 11 | +} |
| 12 | + |
| 13 | +// acción con argumentos adicionales |
| 14 | +// usando la destructuración de argumentos del ES2015 |
| 15 | +function incrementBy ({ dispatch }, amount) { |
| 16 | + dispatch('INCREMENT', amount) |
| 17 | +} |
| 18 | +``` |
| 19 | + |
| 20 | +Esto puede parecer tonto a primera vista: ¿Por qué no despachamos las mutaciones directamente? Bien, recuerda que **las mutaciones deben ser síncronas**. Las acciones no. Podemos realizar operaciones **asíncronas** dentro de una acción: |
| 21 | + |
| 22 | +``` js |
| 23 | +function incrementAsync ({ dispatch }) { |
| 24 | + setTimeout(() => { |
| 25 | + dispatch('INCREMENT') |
| 26 | + }, 1000) |
| 27 | +} |
| 28 | +``` |
| 29 | + |
| 30 | +Un ejemplo más práctico sería una acción para procesar un carrito de la compra, lo cual involucra **llamar a una API asíncrona** y **despachar múltiples mutaciones**: |
| 31 | + |
| 32 | +``` js |
| 33 | +function checkout ({ dispatch, state }, products) { |
| 34 | + // guarda los actuales artículos del carrito |
| 35 | + const savedCartItems = [...state.cart.added] |
| 36 | + // envía la solicitud y con optimismo vacía el carrito |
| 37 | + dispatch(types.CHECKOUT_REQUEST) |
| 38 | + // el API de la tienda acepta una retrollamada en caso de éxito |
| 39 | + // y otra en caso de fallo |
| 40 | + shop.buyProducts( |
| 41 | + products, |
| 42 | + // éxito |
| 43 | + () => dispatch(types.CHECKOUT_SUCCESS), |
| 44 | + // fallo |
| 45 | + () => dispatch(types.CHECKOUT_FAILURE, savedCartItems) |
| 46 | + ) |
| 47 | +} |
| 48 | +``` |
| 49 | + |
| 50 | +Ten en cuenta que en vez de esperar valores de retorno o pasar retrollamadas a acciones, el resultado de llamar al API asíncrono es también gestionado despachando mutaciones. La regla de oro es que **los únicos efectos secundarios producidos por llamar acciones deberían ser mutaciones despachadas**. |
| 51 | + |
| 52 | +### Llamando acciones en componentes |
| 53 | + |
| 54 | +Puedes haber notado que las funciones asociadas a las acciones no son directamente ejecutables sin la referencia a una instancia del almacén. Técnicamente, podemos invocar una acción llamando `action(this.$store)` dentro de un método, pero es mejor si directamente podemos asignar las acciones como métodos de los componentes para así poder fácilmente referenciarlos dentro de las plantillas. Podemos hacerlo usando la opción `vuex.actions`: |
| 55 | + |
| 56 | +``` js |
| 57 | +// dentro del componente |
| 58 | +import { incrementBy } from './actions' |
| 59 | + |
| 60 | +const vm = new Vue({ |
| 61 | + vuex: { |
| 62 | + getters: { ... }, // getters del estado |
| 63 | + actions: { |
| 64 | + incrementBy // abreviación de un objeto literal en ES6, asignación usando el mismo nombre |
| 65 | + } |
| 66 | + } |
| 67 | +}) |
| 68 | +``` |
| 69 | + |
| 70 | +Lo que el código anterior hace es asignar la acción pura `incrementBy` a la instancia del almacén del componente, y exponerlo en el componente como un método de instancia, `vm.incrementBy`. Cualquier argumento pasado a `vm.incrementBy` será pasado a la función de la acción después del primer argumento que es el almacén, así pues: |
| 71 | + |
| 72 | +``` js |
| 73 | +vm.incrementBy(1) |
| 74 | +``` |
| 75 | + |
| 76 | +es equivalente a: |
| 77 | + |
| 78 | +``` js |
| 79 | +incrementBy(vm.$store, 1) |
| 80 | +``` |
| 81 | + |
| 82 | +Pero la ventaja es que se puede asignar más fácilmente dentro de la plantilla del componente: |
| 83 | + |
| 84 | +``` html |
| 85 | +<button v-on:click="incrementBy(1)">incrementar por uno</button> |
| 86 | +``` |
| 87 | + |
| 88 | +Puedes obviamente usar un nombre de método diferente cuando asignes las acciones: |
| 89 | + |
| 90 | +``` js |
| 91 | +// dentro del componente |
| 92 | +import { incrementBy } from './actions' |
| 93 | + |
| 94 | +const vm = new Vue({ |
| 95 | + vuex: { |
| 96 | + getters: { ... }, |
| 97 | + actions: { |
| 98 | + plus: incrementBy // asignar usando un nombre diferente |
| 99 | + } |
| 100 | + } |
| 101 | +}) |
| 102 | +``` |
| 103 | + |
| 104 | +Ahora la acción será asignada como `vm.plus` en vez de `vm.incrementBy`. |
| 105 | + |
| 106 | +### Acciones en línea |
| 107 | + |
| 108 | +Si la acción es específica del componente, puedes usar un atajo y definirla en línea: |
| 109 | + |
| 110 | +``` js |
| 111 | +const vm = new Vue({ |
| 112 | + vuex: { |
| 113 | + getters: { ... }, |
| 114 | + actions: { |
| 115 | + plus: ({ dispatch }) => dispatch('INCREMENT') |
| 116 | + } |
| 117 | + } |
| 118 | +}) |
| 119 | +``` |
| 120 | + |
| 121 | +### Asignando todas las acciones |
| 122 | + |
| 123 | +Si simplemente quieres asignar todas las acciones compartidas: |
| 124 | + |
| 125 | +``` js |
| 126 | +import * as actions from './actions' |
| 127 | + |
| 128 | +const vm = new Vue({ |
| 129 | + vuex: { |
| 130 | + getters: { ... }, |
| 131 | + actions // asignar todas las acciones |
| 132 | + } |
| 133 | +}) |
| 134 | +``` |
0 commit comments