Store: Options & Composition API

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.

Crea una cuenta y continúa aprendiendo 🚀

Store: Options & Composition API