defineStore y state
Contenido del curso
Conceptos fundamentales
Cierre del curso
defineStore y state
Contenido del curso
defineStore y state
Ameth Ordoñez Erazo
Estudiante
Referi Games
Estudiante
Felix Torres Javier Antonio
Estudiante
Carlos Rodríguez
Estudiante
Alexander Agrazal
Estudiante
Uriel Solis Salinas
EstudianteLes 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.
Relax, apenas estamos comenzando el curso.
muchas gracias por el aporte!!!!
Vengo de casarme con vuex del curso anterior, ahora me divocio para casarme con pinia! Me pasó lo mismo con js y ts!
Recomiendo usar Composition API. sin usar mapper y option api hace el código más limpio.
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: .
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.