Mutations

Clase 8 de 19 • Curso de Vue.js: Manejo del Estado con Vuex

Ameth Ordoñez Erazo

student•

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>

Andrés Martínez González

student•

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"]),
	},
};

Ricardo Portillo

student•

me costaba entender como usar los map de vuex es muy interesante

Alexandra Salazar

student•

¿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?

Diana Martinez

student•

Así es, eso es lo que suele utilizarse, no es un estándar, pero es lo que usa el core team de Vue.

Julian David Alzate Cuervo

student•

Las mutaciones Vuex son una de las piezas clave ya que se encargan de mutar el estado.

Jose Alejandro Pantoja Giraldo

student•

erre, pense q los getters eran los methods jejeje