State

Uriel Solis Salinas

Estudiante

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>

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