State

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

Ameth Ordoñez Erazo

student•

En composition API no es necesario utilizar el mapState, pues ya en Vue3 y Vue4, la composition API provee para Vuex poder utilizar directamente una propiedad computada reactiva que reemplaza a $store.state:

Jonathan Leo Castro García

student•

Gracias por el aporte, estaba buscando esta sintaxis con el.

Uriel Solis Salinas

student•

State

El state se refiere al objeto que contiene el estado centralizado de la aplicación. Este estado se puede acceder y actualizar desde cualquier componente de la aplicación que esté utilizando Vuex. . El objeto state es una instancia reactiva, lo que significa que cualquier cambio que se realice en el objeto será automáticamente reflejado en cualquier componente que esté utilizando ese estado. . Para definir el objeto state en Vuex, se crea un objeto JS en el archivo index.js (o cualquier otro archivo donde se defina el store de Vuex) y se exporta como un módulo Vuex. El objeto state en Vuex es un objeto plano de JS que contiene las propiedades del estado de la aplicación.

Por ejemplo, si se quiere almacenar el nombre y la edad de un usuario en el objeto State, se podría definir así;

import { createStore } from "vuex";

const store = createStore({
  state: {
    usuario: {
      nombre: "",
      edad: 0
    }
  }
})

export default store;

En este ejemplo, el objeto State contiene una propiedad llamada "usuario", que es un objeto que tiene dos propiedades: "nombre" y "edad". . Para acceder a los valores del objeto State desde las props de un componente, primero se debe importar la función **mapState** de Vuex. Luego, se utiliza la función mapState para mapear el objeto State a las propiedades computadas del componente. . Para acceder al valor de "nombre" del objeto State en las props de un componente, se podría hacer lo siguiente:

<template>
  <div>
    <p>Nombre: {{ nombre }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: {
    // Props del componente
  },
  computed: {
    ...mapState({
      nombre: state => state.usuario.nombre
    })
  }
}
</script>

En este ejemplo, se utiliza la función mapState para mapear la propiedad "nombre" del objeto State a una propiedad computada del componente llamada "nombre". Luego, se utiliza la propiedad "nombre" en el template del componente para mostrar el valor del nombre del usuario. . Otra forma sería dentro del template:

<!-- como contenido -->
<p> {{ $store.state.usuario.nombre }} </p>

Andrés Martínez González

student•

Formas de acceder a variables del store:

Desde el template

<p><!-- como contenido -->
	{{ $store.state.variable }}
</p>

<!-- como atributo de una etiqueta -->
<tag :attr="$store.state.variable" />

Desde variables computadas con la sintaxis OptionsApi

import { mapState } from "vuex";

export default {
	computed: {
		// opción 1
		variable() {
			return this.$store.state.variable;
		},

		// opción 2
		...mapState({
			variable: (state) => state.variable
		}),

		// opción 3 (alias)
		...mapState(["variable"]),
	},
};

Jose Alejandro Pantoja Giraldo

student•

Simplificacion en su maxima expresion

computed: {
  ...mapState(['username'])
}

Deyvi Rosado Diaz

student•

En Vue 3 composition api y Vuex4, se crea el store y se agrega como un plugin al momento de montar la aplicación.

Ya no se usa mapState.

Ameth Ordoñez Erazo

student•

Otra forma de darle un alias a las propiedades de mapState es usando un string.

Esto:

computed: mapState({
	username: (state) => state.username
 })

Es lo mismo que esto:

computed: mapState({
	username: 'username'
 })

Pasando la cadena de texto 'username' es lo mismo que decir state => state.username

State

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