Mutations

Ameth Ordoñez Erazo

Estudiante

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

Estudiante

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

Estudiante

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

Alexandra Salazar

Estudiante

¿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

Estudiante

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

Estudiante

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

Jose Alejandro Pantoja Giraldo

Estudiante

erre, pense q los getters eran los methods jejeje

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

Mutations

Introducción

¿Qué es VUEX y para qué sirve?

Manejo de estado

Patrón FLUX

Conceptos básicos

Instalación y boilerplate de Vuex

Estado simple con Options API

State

Getters

Mutations

Actions

Organización de código

Helpers

Modules

Espacios de nombres

Modelo de datos

Caso de uso: ChatApp con Vuex

Normalización

Canales

Mensajes

Canales y Mensajes

Contactos

Cierre del curso

Despedida