Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Store: Options & Composition API
Veamos cómo definir una Store con Pinia, usando tanto Options API como Composition API.
Uso de Pinia en Vue
Cuando creamos nuestro proyecto, este vino con un archivo main.ts que hemos ido reemplazando. Actualmente, usamos Vuetify y Vue Router.
Integración de Pinia
Para hacer uso de Pinia, revisamos la copia del archivo main original. Aquí ya se hacía uso de Pinia. Lo único que tenemos que hacer es:
- Importar
createPinia. - Declarar que queremos usar Pinia.
Esto crea una instancia de Pinia y la asocia a nuestra aplicación de Vue.
Eliminación de Archivos Innecesarios
Como ya no usaremos main2.ts, podemos eliminarlo. Este archivo incluía el uso de v.router y de Pinia. Al inicio, no los usamos porque no sabíamos qué eran.
Ahora tenemos:
- Vuetify para los componentes.
- Pinia para la gestión del estado.
-
Vue Router (
v.router) para gestionar rutas.
El archivo main2.ts importaba la hoja de estilos main.css, que Vue incluía como ejemplo. Como ya no la necesitamos, la eliminamos junto con main2.ts.
Nos quedamos solo con main.ts, que usa Vuetify, Pinia y v.router.
Carpeta de Stores
Nuestro proyecto vino con una carpeta stores, donde podemos crear tantos stores como queramos usando Pinia.
Aquí encontramos un ejemplo: un store llamado counter.
Este código es distinto al de la documentación. Así como podemos definir componentes con Options API o Composition API, en Pinia también hay dos estilos.
Definición de un Store con Options API
Si queremos usar Options API, definimos un store con:
- Un nombre.
- Un estado.
- Getters.
- Actions.
Ejemplo:
state: {
count: 0,
name: "Eduardo"
}
Los getters nos permiten acceder a valores del estado con cierto formato.
Ejemplo de getter:
doubleCount: (state) => state.count * 2
Si en algún lugar del proyecto necesitamos el doble del contador, usamos este getter.
Ejemplo de action:
increment() {
this.count++
}
En Options API, el state equivale al data de los componentes de Vue, los getters a las computed properties y las actions a los métodos.
Este estilo se recomienda para quienes recién empiezan, ya que es más entendible.
Definición de un Store con Composition API
En Composition API, el mismo ejemplo se define así:
- Se usa
refpara definir variables de estado. - Se usa
computedpara los getters. - Se usa una función para las actions.
- Se hace
returnde lo que queremos exponer.
Ejemplo:
const count = ref(0)
const name = ref("Eduardo")
const doubleCount = computed(() => count.value * 2)
const increment = () => {
count.value++
}
return { count, name, doubleCount, increment }
Este estilo es más conciso, pero menos explícito para principiantes.
¿Qué Estilo Usar?
Puedes usar cualquiera de los dos. Sin embargo, para quienes recién empiezan, se recomienda Options API, porque define de manera más clara el estado, los getters y las actions.
En Composition API, estos elementos se sobreentienden:
-
ref→ variable de estado. -
computed→ getter. - Función que modifica el estado → action.
No debemos olvidar hacer return de cualquier objeto que incluya referencias a estos elementos.
Definiendo un Store para el Carrito de Compras
Ahora pasemos a definir un store para nuestro carrito de compras.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Cuando creamos nuestro proyecto. Este vino con un archivo "main.ts" que nosotros hemos ido reemplazando. Nosotros actualmente hacemos uso de Vuetify y hacemos uso de Vue Router. ¿Cómo podemos hacer uso de Pinia? Vamos a ver nuestra copia que habíamos hecho del archivo "main" original. Aquí se hacía uso de Pinia. Lo único que tenemos que hacer es importar "createPinia" de esta manera y luego declarar que queremos usar Pinia. De esta forma, con esto se crea una instancia de Pinia y se asocia a nuestra aplicación de Vue. Entonces, como ya no vamos a usar este archivo “main2”, ya lo podemos eliminar. Ese archivo incluía el uso de "v.router" y de Pinia. En un inicio no queríamos usarlos porque no sabíamos que eran. Ahora estamos usando Vuetify para nuestros componentes, Pinia para la gestión de nuestro estado y "v.router" para gestionar rutas en nuestro proyecto. Aquí vemos que este archivo “main2” de hecho se encontraba importando esta hoja de estilos "main.css". Eso es porque Vue como ejemplo nos daba una página que tenía de ciertos estilos. Como ya no lo necesitamos, vamos a eliminar el archivo "main css". Vamos a eliminar también el archivo "main2.ts" y nos vamos a quedar simplemente con nuestro único archivo "main" que hace uso de Vuetify, de Pinia y de "v.router". Cuando creamos nuestro proyecto éste vino también con una carpeta "stores", aquí nosotros podemos crear cuantos "stores" queramos haciendo uso de Pinia. Y aquí nos encontramos con un ejemplo. Aquí se está definiendo un "store" llamado "counter". Como puedes ver, este código es distinto al que estuvimos viendo hace un momento en la documentación. Lo que ocurre es que así como podemos definir componentes con dos estilos "options" y "composition", en el caso de Pinia, los "stores" también los podemos definir con dos estilos. Si queremos usar "options API”, podemos definir un "store". De esta manera un "store" tendrá un nombre y en su configuración tendrá un estado, tendrá "getters" y tendrá "actions". Por ejemplo, un estado que consta de un contador cero y un nombre “Eduardo”, que justamente en nombre del creador podemos tener "getters". Los "getters" nos permiten acceder a valores del estado pero con cierto formato. Por ejemplo, aquí se está definiendo un "getter" que se llama "doubleCount". Este que "doubleCount" nos permite acceder al contador pero multiplicado por dos. Entonces, si en algún lugar de tu proyecto necesitas acceder al doble del contador, podrás usar este "getter". Este "getter" devuelve un valor que se calcula a partir del "state". Asimismo, tenemos "actions". Se está definiendo una acción llamada "increment" que lo que hace es aumentar el valor de la variable "count" en uno. Tal como nos lo indica el "state" es equivalente al "data" que tenemos en nuestros componentes, los que son equivalentes a computer properties que tenemos en los componentes y los "action" son equivalentes a métodos. Generalmente se recomienda usar esta sintaxis cuando uno recién empieza, ya que luce más entendible. Sin embargo, también podemos usar el estilo de “copositionAPI”. El mismo ejemplo que vimos antes. Luce de esta otra manera usando “compositionAPI”. Tenemos aquí un "counter" y nuestras variables de estado se definen usando esta función "ref". Aquí se está creando una variable de estado "count" con un valor inicial de cero y una variable de estado “name” con el valor de “Eduardo”, esto vendría a ser nuestro estado. Luego tenemos aquí un "getter". Este "getter" llamado "doubleCount", se encarga de devolver el valor de nuestro "count" multiplicado por dos. Y luego aquí tenemos un "action" que es una función increment para aumentar el valor de "count" en uno. Luego tenemos que hacer "return" de lo que queremos exponer. En este caso estamos exponiendo dos variables de estado un "getter" y un "action". Esto es equivalente a esto otro. Lo único que cambia es la manera en que escribimos el código. El ejemplo que nos viene en nuestro proyecto hace uso de Composition API. ¿Qué estilo usar? Puedes usar cualquiera de los dos estilos. Sin embargo, para alguien que recién empieza se recomienda usar el estilo de Options API usando "optionsAPI” Se define de manera un poco más explícita lo que viene a ser el “estado” los "getters" y los "actions". Por eso se recomienda esto cuando uno está empezando. En cambio aquí no hay una sección que diga “state”, no hay una sección que diga "getters" ni "actions", sino que eso se sobreentiende cuando se usa “ref”, se trata de una variable de estado. Cuando se usa “computed” se trata de un "getter". Y cuando defines una función que modifica el estado, se trata de un "action" y no debes olvidar de hacer "return" ningún objeto que incluya referencias hacia estos tres estados "getter" "action". Bien, presionamos entonces a definir un "store" para nuestro carrito de compras.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript