¿Estás perdiendo la cabeza intentando convertir tu tienda Vuex a Pinia? Aquí tienes una guía paso a paso sobre cómo migrar las definiciones de tienda y las pruebas, de manera fácil y sin sufrimiento.
![TestJS Summit 2021](https://gitnation.imgix.net/stichting-frontend-amsterdam/image/upload/v1619376949/rlwmbgekjgai9xefiety.png?auto=format,compress&fit=scale&w=60)
¿Estás perdiendo la cabeza intentando convertir tu tienda Vuex a Pinia? Aquí tienes una guía paso a paso sobre cómo migrar las definiciones de tienda y las pruebas, de manera fácil y sin sufrimiento.
Pinia es la biblioteca oficialmente reconocida para la gestión de estado en Vue.js, diseñada para trabajar con la API de composición y simplificar la gestión de estado en comparación con Vuex, especialmente en la transición de Vue.js 2 a Vue.js 3.
Sí, Pinia puede coexistir con Vuex. Esto permite una migración gradual de Vuex a Pinia, facilitando la transición sin necesidad de reescribir todo el manejo de estado de una sola vez.
Para instalar Pinia, simplemente usa el comando 'npm install pinia' o 'yarn add pinia'. Si estás utilizando Vue.js 2.6, también necesitas instalar la Vue Composition API.
Pinia ofrece una API más sencilla sin mutaciones, lo que reduce la verbosidad. Las tiendas son dinámicas por defecto, eliminando la necesidad de añadir tiendas dinámicamente y no requiere envoltorios complejos para soportar TypeScript, facilitando su uso y mantenimiento.
En Pinia, defines una tienda usando la función 'defineStore', donde pasas un identificador único y una función para el estado, junto con getters y acciones. Esto elimina la necesidad de mutaciones y simplifica la gestión del estado.
Para migrar de Vuex a Pinia, cambia la inicialización de la tienda y utiliza 'defineStore' en lugar de 'createStore'. Elimina las mutaciones y adapta los getters y acciones para usar el contexto 'this' en lugar de pasar el estado y getters como argumentos.
Para usar una tienda Pinia en componentes Vue, importa la tienda usando 'useStore' desde el archivo de tienda y accede a sus estados, getters y acciones directamente. Esto simplifica la interacción con el estado comparado con Vuex.
Sí, Pinia tiene soporte integrado para TypeScript, proporcionando auto-completación y tipos seguros sin la necesidad de configuraciones adicionales, lo que mejora la experiencia de desarrollo y mantiene el código más limpio y fácil de mantener.
Pinia es la biblioteca oficialmente reconocida para la gestión de estados en Vue.js, con una API más sencilla que Vuex y soporte para TypeScript. Migrar a Pinia implica crear una tienda raíz, definir tiendas y usar store2refs o el uso exportado de la tienda en los componentes. Probar el comportamiento real de la tienda requiere crear una instancia de Pinia, mientras que las pruebas de componentes implican importar useStore y usar mapState y mapAction de vigname. La migración de pruebas implica crear una vista local y usar el plugin de Pinia, y Vuex y Pinia pueden coexistir pero deben ser migrados módulo por módulo. La persistencia de la tienda se puede lograr suscribiéndose a los cambios de la tienda o utilizando un observador.
Pinia es la biblioteca oficialmente reconocida para la gestión de estado en Vue.js. Tiene una API más sencilla que VueX, no necesita mutaciones y soporta TypeScript sin envoltorios complejos. Pina puede coexistir con Vuex.
Hola, ¿estás listo para migrar tus proyectos de UX a Pinia? Bueno, empecemos juntos.
Hola, soy Danny, soy de Italia. Soy un desarrollador full stack que trabaja con Python y JavaScript, y por supuesto, Vue.js. Y trabajo para Fingerprint como desarrollador front-end.
Entonces, comencemos hablando de Pinia. ¿Qué es Pinia? Bueno, Pinia es la biblioteca oficialmente reconocida para la gestión de estado en Vue.js. Pinia comenzó como un experimento para rediseñar cómo podría ser una tienda para Vue.js con API de composición. Y por supuesto, intentaron implementar ideas y muchas cosas del equipo central de discusión para VueX5. Y luego vieron que ya estaba allí. Entonces, ¿por qué aplicar de nuevo, los mismos cambios a Vuex para crear VueX5, cuando PNIA ya estaba allí. Así que vamos a darle a PNIA y hacerlo la recomendación predeterminada ahora.
Entonces, antes de comenzar a migrar todo, hagamos una rápida comparación entre VueX y PNIA. Por supuesto, PNIA funciona con Vue.js 2 y 3 con la misma versión instalada. Así que no necesitas instalar, por ejemplo, VueX 3 para Vue.js 2 y VueX 4 para Vue.js 3. Solo necesitas instalar la última PNIA disponible. Y por supuesto que funciona. Y aparte de esto, tiene una API más sencilla que VueX porque las mutaciones ya no existen. A menudo se percibían como extremadamente verbosas. Y de nuevo, con cadenas mágicas para inyectar y así sucesivamente, eran un poco difíciles de usar. Así que no necesitas mutaciones ahora, solo acciones, pero lo veremos en un momento. Y luego no necesitas crear envoltorios complejos personalizados para soportar TypeScript porque, por supuesto, está, de nuevo, siempre implementado como una función o como un objeto. Así que es perfecto con la auto-completación y así sucesivamente. Así que no más cadenas mágicas para inyectar, importar funciones, importar métodos y propiedades, llamarlos y disfrutar de la completación. Y no necesitas añadir tiendas de forma dinámica porque todas son dinámicas por defecto. Es genial. Por la misma razón, no necesitas anidar módulos y no necesitas crear una estructura anidada para tu tienda porque son como con espacios de nombres, puedes decir. Y puedes usar una tienda dentro de otra y funciona. Simplemente genial.
Entonces, comencemos instalando Pina. Pina puede coexistir con Vuex, así que puedes instalarlos juntos.
Si estás utilizando Vue.js 3 o 2.7, puedes simplemente instalar Pina. Si estás utilizando Vue.js 2.6, necesitas instalar también Vue composition API. Para crear la tienda raíz, importa create Pina y úsalo en tu aplicación. Para una tienda raíz avanzada, crea un archivo index.js en el directorio de tiendas. Define al menos una tienda utilizando la sintaxis proporcionada. Recuerda devolver propiedades, getters y acciones en la parte inferior de la función. Para usar la tienda en componentes, importa store2refs o la tienda de uso exportada. Para Vue.js 2, importa mapState y mapActions. Ahora, preparemos la migración examinando la estructura de la tienda Vuex.
Si estás utilizando Vue.js 3 o 2.7, puedes simplemente instalar Pina. Eso es todo, pero si estás utilizando Vue.js 2.6, necesitas instalar también Vue composition API porque Pina funciona con composition API. Entonces puedes encontrar una tienda raíz de una manera básica. Así que simplemente importando create Pina y usándolo en tu aplicación. O si estás utilizando Vue.js 2.x, necesitas importar también el plugin Pina Vue y usar el plugin antes de crear Pina. Pero si quieres crear la tienda raíz de una manera avanzada, necesitas crear un archivo index.js en el directorio de tiendas, importando create Pina y creando la tienda. Algo similar para Vue.js 2.x. Y luego en tu archivo main.js, puedes importar tu Pina desde tiendas y usarlo en tu aplicación. Así que, todo lo relacionado con Pina permanecerá en la carpeta de tiendas.
Luego, después de definir la tienda raíz, llamémosla la instancia Pina, necesitas definir al menos una tienda si quieres usar una tienda. Así que, esta es la sintaxis para Vue.js 3.x y 2.x también. Así que, necesitas definir la tienda pasando el nombre de la tienda como primer parámetro, y necesita ser único entre las tiendas. Y como segundo parámetro, necesitas pasar el estado, que es una función que devuelve un objeto. Y luego getters y acciones, por supuesto sin mutaciones, acciones por supuesto, sin mutaciones, pero acciones que cambian el estado de la tienda usando solo esto. Puedes usar una sintaxis de composition API también. Es algo similar al script de configuración, pero lo importante que debes recordar es que necesitas devolver propiedades, getters y acciones en la parte inferior de la función, de lo contrario no funcionará. Pero si recuerdas esto, puedes simplemente definir tus propiedades reactivas, computadas y funciones, y funciona. Es realmente genial.
Ahora, para usar la tienda en tus componentes, necesitas importar store2refs. Store2refs si quieres usar la sintaxis aquí, o simplemente importando la tienda, tu tienda de uso exportada, luego declarando la tienda. Y a partir de ahora puedes usar directamente la tienda, accediendo a las acciones de estado y getters desde aquí. O si quieres usar getters y propiedades reactivas de una manera fácil con variables, puedes definirlas usando una sintaxis computada como esta o como mencioné hace unos segundos, puedes usar store2refs para expandirlas en variables en una sola línea. No necesitas store2refs para acciones porque son funciones simples. Así que puedes llamarlas sin la reactividad. Para Vue.js 2, necesitas importar mapState y mapActions algo similar a Vuex y por supuesto, tu tienda y luego puedes mapear el estado y las acciones para envolver los getters de estado en mapState y acciones, mapActions, por supuesto. Y puedes usar cadenas como lo estábamos haciendo en Vuex en Vuex o puedes mapearlos de esta manera.
Así que ahora es el momento de migrar todo de Vuex a Binia. Pero antes de eso, necesitamos preparar la migración para tener todo ordenado y todo listo para ir. Así que echemos un vistazo a la estructura de la tienda Vuex. Tenemos la tienda con index.js conteniendo la inicialización de Vuex, Importa modules, y la tienda principal y otros modules.
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Comments