Mutations
Clase 8 de 19 • Curso de Vue.js: Manejo del Estado con Vuex
Contenido del curso
Ameth Ordoñez Erazo
student•
hace 4 años
Clase 8 de 19 • Curso de Vue.js: Manejo del Estado con Vuex
Contenido del curso
Ameth Ordoñez Erazo
Andrés Martínez González
Ricardo Portillo
Alexandra Salazar
Diana Martinez
Julian David Alzate Cuervo
Jose Alejandro Pantoja Giraldo
Utilizando mutations con composition API:
<template> <div class="profile"> <div class="box"> <img src="/avatars/avatar.jpg" alt="avatar" /> <label for="username">Nombre de usuario</label> <input type="text" placeholder="Jane Smith" :value="username" @input="actualizar($event.target.value)" /> <button>Acceder</button> </div> </div> </template> <script setup> import { computed } from "vue"; import { useStore } from "vuex"; const store = useStore(); const username = computed(() => store.state.username); const actualizar = (value) => store.commit("updateUsername", value); </script>
Cómo modificar variables del store con mutatios
En el store
createStore({ state() { return { variable: val, }; }, mutations: { modificar(state, val) { state.variable = val; }, }. });
En el componente destino
<input @input="modificar($event.target.value)" />
import { mapMutations } from "vuex"; export default { methods: { ...mapMutations(["modificar"]), }, };
me costaba entender como usar los map de vuex es muy interesante
¿Cuál es el estándar recomendado para nombrar las funciones Mutations? Había leído en un articulo o en un curso que esta era la sintaxis recomendada (snake case mayus):
mutations: { SET_AUTH_TOKEN(state, jwt) { state.authToken = jwt; }, },
¿Es correcto o todavía no hay un estándar para esto?
Así es, eso es lo que suele utilizarse, no es un estándar, pero es lo que usa el core team de Vue.
Las mutaciones Vuex son una de las piezas clave ya que se encargan de mutar el estado.
erre, pense q los getters eran los methods jejeje