State
Clase 6 de 19 • Curso de Vue.js: Manejo del Estado con Vuex
Contenido del curso
Ameth Ordoñez Erazo
student•
hace 4 años
Jonathan Leo Castro García
student•
hace 4 años
Clase 6 de 19 • Curso de Vue.js: Manejo del Estado con Vuex
Contenido del curso
Ameth Ordoñez Erazo
Jonathan Leo Castro García
Uriel Solis Salinas
Andrés Martínez González
Deyvi Rosado Diaz
Jose Alejandro Pantoja Giraldo
Ameth Ordoñez Erazo
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:
Gracias por el aporte, estaba buscando esta sintaxis con el.
<script setup> me sirvió de mucho saludosState
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>
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"]), }, };
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.
Simplificacion en su maxima expresion
computed: { ...mapState(['username']) }
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