defineStore y state

Clase 3 de 8 • Curso de Vue.js: Manejo del Estado con Pinia

Ameth Ordoñez Erazo

student•

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.

Referi Games

student•

Relax, apenas estamos comenzando el curso.

Felix Torres Javier Antonio

student•

muchas gracias por el aporte!!!!

Carlos Rodríguez

student•

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

Alexander Agrazal

student•

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

Uriel Solis Salinas

student•

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: .

Utilizar desde los componentes el state como en Vuex.
Declarar getters.
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.

// Sintaxis de objeto de opciones

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

// Sintaxis de función de configuración

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

  return { count, increment }
})

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 };
});

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

defineStore y state

Introducción

De Vuex a Pinia

Conceptos fundamentales

Instalación y boilerplate de Pinia

defineStore y state

Getters

Actions

Uso fuera de componentes

Cierre del curso

Diferencias entre Vuex y Pinia

Despedida