No tienes acceso a esta clase

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

defineStore y state

3/8
Recursos

Aportes 4

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

Les aconsejo leer esto: 馃憖
Se puede realizar la configuraci贸n de un store pasandole una funci贸n de configuraci贸n en vez de un objeto de opciones. Esta sintaxis de funci贸n brinda mucha m谩s flexibilidad que la de un objeto de opciones, ya que podemos crear watchers dentro de un store y usar libremente cualquier Composable.

Esto:


// Sintaxis de objeto de opciones

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})


Es lo mismo que esto:


// Sintaxis de funci贸n de configuraci贸n

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})


驴Qu茅 sintaxis debo elegir?
Al igual que pasa con la API de Vue, entre la Options API y la Composition API, elije el que te resulte m谩s c贸modo. Si no est谩s seguro, prueba primero con la sintaxis de tipo objeto.
A mi personalmente me gusta m谩s la de tipo configuraci贸n, pues yo programo m谩s usando la Composition API y me resulta muy similar su sintaxis. A dem谩s que me da muchas m谩s flexibilidad a la hora de hacer funciones complejas.
En store de sintxis de funci贸n:

  • ref()s se convierten en propiedades de state

  • computed() se convierte en getters

  • function() se convierte en actions

Les dejo el ejemplo de como se escribiria el store de profile.js en sintaxis de configuraci贸n usando una funci贸n:

import { defineStore } from "pinia";
import { ref } from "vue";

export const useProfileStore = defineStore("profile", () => {
  const id = ref(1);
  const username = ref("amethgabriel1991");
  const avatar = ref("/avatars/avatar-02.jpg");
  const status = ref("active");

  return { id, username, avatar, status };
});

El uso en los archivos de las vistas es exactamente el mismo.

Vengo de casarme con vuex del curso anterior, ahora me divocio para casarme con pinia! Me pas贸 lo mismo con js y ts!

defineStore y state

.
Pinia es una biblioteca de gesti贸n de estado para aplicaciones Vue.js. Permite crear stores (almacenes) que contienen el estado de la aplicaci贸n y los m茅todos para actualizar ese estado.
.
El m茅todo defineStore de Pinia se utiliza para crear un nuevo store en la aplicaci贸n. Este m茅todo acepta dos argumentos: el nombre del store y un objeto que define el estado inicial y las acciones del store. El objeto de definici贸n de store puede incluir propiedades como state, getters, mutations y actions.
.
Ejemplo de la clase, se cre贸 la carpeta store para agregar los stores:
store/profile.js

import { defineStore } from "pinia";

// Sintaxis de objeto de opciones
export default defineStore("profile", {
  state: () => ({
    id: 1,
    username: "euss99",
    avatar: "/avatars/avatar.jpg",
    status: "active",
  }),
});

// Otra forma ser铆a la sintaxis de funci贸n de configuraci贸n
export const useProfileStore("profile", {
  state: () => ({
    id: 1,
    username: "euss99",
    avatar: "/avatars/avatar.jpg",
    status: "active",
  }),
});

state es una funci贸n que devuelve el estado inicial del store. Las propiedades definidas en esta funci贸n se pueden acceder y actualizar desde dentro del store y tambi茅n desde los componentes que lo utilizan.
.
El objeto state tambi茅n se puede inicializar con un objeto en lugar de una funci贸n. En este caso, el objeto se compartir谩 entre todas las instancias de componentes que usen el store, lo que puede causar problemas si el objeto se modifica en uno de los componentes.
.
Por lo tanto, es recomendable usar una funci贸n que devuelve un objeto en lugar de un objeto directamente para evitar problemas de mutaci贸n inesperada.

Para llamar el state dentro de los compontes con composition API:

import useProfileStore from "@/stores/profile.js";

Para importar el modulo profile.js de pinia, se podr铆a utilizar de diferentes maneras:
.

  1. Utilizar desde los componentes el state como en Vuex.
  2. Declarar getters.
  3. Importar el m贸dulo definido y tiene el estandar que tenga un nombre:
    use + nombre del modulo + Store, por ejemplo, useProfileStore.

.
Y se instancia en una variable:

const profileStore = useProfileStore();

Si estuvi茅ramos usando Options API se usar铆an los mappers como en Vuex:
mapActions, mapGetters, mapState, mapMutations.
.
Para llamar los datos del Store profile se usa nombre-de-la-instancia.propiedad:

<ProfileCard
        :avatar="profileStore.avatar"
        :username="profileStore.username"
        :status="profileStore.status"
/>

En resumen, defineStore es un m茅todo de Pinia que se utiliza para crear un store en la aplicaci贸n. state es una funci贸n que devuelve el estado inicial del store y se puede acceder y actualizar desde dentro del store y desde los componentes que lo utilizan.

Recomiendo usar Composition API. sin usar mapper y option api hace el c贸digo m谩s limpio.