No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

State

6/19
Recursos

Aportes 5

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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:

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

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 鈥渦suario鈥, que es un objeto que tiene dos propiedades: 鈥渘ombre鈥 y 鈥渆dad鈥.
.
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 鈥渘ombre鈥 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 鈥渘ombre鈥 del objeto State a una propiedad computada del componente llamada 鈥渘ombre鈥. Luego, se utiliza la propiedad 鈥渘ombre鈥 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>

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 鈥檜sername鈥 es lo mismo que decir state => state.username