Sinceramente con estas clases y con tan excelente profesor, hace que aplicar los conceptos sean mas sencillos de lo normal. Recomendado este curso con los ojos cerrados.
La verdad es que siempre fui del back y me daba algo de incertidumbre el tema del state pero lo explicas tan fácil que queda todo clarísimo. Muchas gracias por éste contenido tan valioso!
Como te mencionaba antes, se me dificultaba Vuex por la sintaxis de la Options API. Aprendí a escribirlo todo con la Composition API. En este caso, la store quedaría: import { ref, computed } from "vue"; import { defineStore } from "pinia"; export const useCounterStore = defineStore("counter", () => { const count = ref(0); const doubleCount = computed(() => count.value * 2); const increment = (val: number) => (count.value += val); return { count, doubleCount, increment }; }); Es un código muchísimo más limpio. Pero al menos ya aprendí la otra forma, que en algún momento me lo topo por allí. GRACIAS!
Le tenía ganas a PINIA y ahora que lo he visto me digo a mi mismo "¿Pero como he podido vivir sin usar esto?". Sencillamente ¡¡Me encanta!! P.D: Please actualiza la ruta de los servidores para la autenticación backend (¿¿En la descripción del video??), para no tener que montarnos la nuestra propia. Además sospecho que para graphQL va a ser necesaria.
Muchas muchas Gracias, por transmitirnos tus conocimientos, que después de tantos tutoriales y cursos que que tomado, por primera vez entiendo y me siento seguro para trabajar con vue js. De verdad eres el mejor!! y muchas gracias otra vez por el tiempo que dedicas a preparar el curso muy muy bien currado.
Hola, gracias !! una pregunta porque en el ejemplo por default de pinia utiliza un computed en la función =>. const doubleCount = computed(() => count.value * 2) function increment() { count.value++ }
Hola! Este es un ejemplo que piniautiliza para mostrar que podemos realizar acciones computadas en el store sin problemas. En este caso, utilizar un computed para doubleCount asegura que siempre tenga el valor correcto en función del valor actual de count. Cuando se usa computed, Pinia se encarga automáticamente de rastrear las dependencias y garantiza que doubleCount se actualice automáticamente cuando count cambie.
Hola Osquel! No necesariamente. Si bien pueden ser sustitutivos según en qué ocasiones, lo habitual es construir stores para información que necesitas servir de forma transversal a diferentes componentes de tu frontal, teniendo en cuenta que estos pueden mutar los elementos y la reactividad será aplicada. Interesante por ejemplo para guardar la información del usuario autenticado. Los servicios,por su parte, son más útiles para hacer fetching y uso / consumo de APIS principalmente. 👍
El objetivo de estos ejemplos es atomizar el ejercicio en cuestión de la materia a tratar. En mi caso, para ejemplos prácticos de trabajo, tenemos los talleres del canal, que son sobre proyectos reales. Para ilustrar un concepto, este es el estándar que se utiliza, ya que al ser un desarrollo trivial, ayuda a enfocar la práctica en el concepto que se busca afianzar, en lugar de "distraerlo" con los asides necesarios que implicarían otra práctica más extensa.
Hola que tal maestro, aqui de nuevo yo con una duda respecto a Pinia. Te cuento que se me ocurrió crear un store para concentrar en el los CSS de tailwind para los colores de un sitio, pero casualmente, cuando reinicio el comando (npm run dev), los css ya no los renderiza, más si escribo las clases en el elemento (buton por ejemplo) si que funciona, pero al traermelos de pinia no. Será que no se debe utilizar para esto pinia ? Lo raro, es que , una vez que logro que funcione (al boton le agrego las clases, guardo el documento y los borro y le asigno la constante que utilizo en pinia) a partir de ahi, si que me toma los cambios que yo almaceno en el store. Es un caos, espero me haya explicado. Asi tengo definido mi store import { ref } from 'vue' import {defineStore} from 'pinia' export const aCFG = defineStore('acfg', () => { const txtColor= 'text-white' const btnColor= ref( 'bg-yellow-500 hover:bg-yellow-400 text-black') return { txtColor, btnColor} }) en los componentes, si que me funciona al usar btnColor y txtColor, pero como comentaba, solo al momento de ponerlos manualmente, guardar documento, eliminarlos de nuevo y dejar en el elemento :class="cfg.btnColor") Bueno, perdon jeje Si no deberia hacerlo así, alguna sugerencia para tener en 1 documento los css para que cualquier cambio lo pueda hacer desde 1 documento, sin tener que andar modificando elemento por elemento ? (sucede que hice mi propio componente boton, y claro es el que utilizo; pero no es el unico, es por ello que me gustaria tenerlo asi :( Saluds!
Hola Arthas! Para este tipo de gestiones de temas es mejor utilizar configuraciones de temas dinámicos dentro del vue.config. Algunos de cómo tailwind incluyen este tipo de controles de forma sencilla para lograr, por ejemplo, el clásico switch entre tema light y dark. Te recomiendo echarle un ojo 👌
Sinceramente con estas clases y con tan excelente profesor, hace que aplicar los conceptos sean mas sencillos de lo normal. Recomendado este curso con los ojos cerrados.
Impresionante lo sencillo que es usar Pinia; gracias por el video, fue muy claro! Excelente!!!
Muchas gracias Oswaldo!
La clase muy digerida, a pesar de que son contenidos densos, con la explicación que ofreces se hace muy fluido.
Muchas gracias Mario!
La verdad es que siempre fui del back y me daba algo de incertidumbre el tema del state pero lo explicas tan fácil que queda todo clarísimo. Muchas gracias por éste contenido tan valioso!
Muchas gracias Maximiliano!
Este cap. tenia yo ganas de pillar 🍍😄
Buen trabajo :), estoy siguiendo tu curso, es muy claro
Muchas gracias!
Como te mencionaba antes, se me dificultaba Vuex por la sintaxis de la Options API.
Aprendí a escribirlo todo con la Composition API. En este caso, la store quedaría:
import { ref, computed } from "vue";
import { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", () => {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const increment = (val: number) => (count.value += val);
return { count, doubleCount, increment };
});
Es un código muchísimo más limpio. Pero al menos ya aprendí la otra forma, que en algún momento me lo topo por allí.
GRACIAS!
Increíble el uso de pinia. Gran curso!!!!
Muchas gracias Patricio!
Excelente curso! Todo me ha quedado muy claro. Muchas gracias por compartir tus conocimientos con nosotros!
Muchas gracias William!
Le tenía ganas a PINIA y ahora que lo he visto me digo a mi mismo "¿Pero como he podido vivir sin usar esto?". Sencillamente ¡¡Me encanta!!
P.D: Please actualiza la ruta de los servidores para la autenticación backend (¿¿En la descripción del video??), para no tener que montarnos la nuestra propia. Además sospecho que para graphQL va a ser necesaria.
Muchas muchas Gracias, por transmitirnos tus conocimientos, que después de tantos tutoriales y cursos que que tomado, por primera vez entiendo y me siento seguro para trabajar con vue js. De verdad eres el mejor!! y muchas gracias otra vez por el tiempo que dedicas a preparar el curso muy muy bien currado.
Mil gracias por tu comentario Robert!
Bue, pinia va como piña! que en los modismos argentinos seria, este es el que va! Abrazo y gracias por tanto!
Ya he aprendido un modismo nuevo, jeje
🚀 Me encantó Pinia
Mi preferido sin duda para estados globales.
brutal Pinia!!!!
Muy buen Tutorial!
Muchas gracias Jabarua!
Gracias!
gracias!
Hola, gracias !! una pregunta porque en el ejemplo por default de pinia utiliza un computed en la función =>. const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
Hola! Este es un ejemplo que piniautiliza para mostrar que podemos realizar acciones computadas en el store sin problemas.
En este caso, utilizar un computed para doubleCount asegura que siempre tenga el valor correcto en función del valor actual de count. Cuando se usa computed, Pinia se encarga automáticamente de rastrear las dependencias y garantiza que doubleCount se actualice automáticamente cuando count cambie.
Me gusta el contenido del curso. Tengo una duda con esto de los store o estados globales se deja de usar los service?
Hola Osquel! No necesariamente.
Si bien pueden ser sustitutivos según en qué ocasiones, lo habitual es construir stores para información que necesitas servir de forma transversal a diferentes componentes de tu frontal, teniendo en cuenta que estos pueden mutar los elementos y la reactividad será aplicada. Interesante por ejemplo para guardar la información del usuario autenticado.
Los servicios,por su parte, son más útiles para hacer fetching y uso / consumo de APIS principalmente. 👍
Pinia lo hace tan facil mas ejercicios con typescript+pinia+vite
like y comentario
Muchas gracias Aviel!
dentro de poco ponemos pinia y ya lo hace todo solo. jajaja
Jejejeje
Deberias de hacer un ejemplo mas apegado a la realidad, ejemplos como contadores, pokemon no aportan en nada
El objetivo de estos ejemplos es atomizar el ejercicio en cuestión de la materia a tratar. En mi caso, para ejemplos prácticos de trabajo, tenemos los talleres del canal, que son sobre proyectos reales. Para ilustrar un concepto, este es el estándar que se utiliza, ya que al ser un desarrollo trivial, ayuda a enfocar la práctica en el concepto que se busca afianzar, en lugar de "distraerlo" con los asides necesarios que implicarían otra práctica más extensa.
Hola que tal maestro, aqui de nuevo yo con una duda respecto a Pinia.
Te cuento que se me ocurrió crear un store para concentrar en el los CSS de tailwind para los colores de un sitio, pero casualmente, cuando reinicio el comando (npm run dev), los css ya no los renderiza, más si escribo las clases en el elemento (buton por ejemplo) si que funciona, pero al traermelos de pinia no.
Será que no se debe utilizar para esto pinia ? Lo raro, es que , una vez que logro que funcione (al boton le agrego las clases, guardo el documento y los borro y le asigno la constante que utilizo en pinia) a partir de ahi, si que me toma los cambios que yo almaceno en el store.
Es un caos, espero me haya explicado.
Asi tengo definido mi store
import { ref } from 'vue'
import {defineStore} from 'pinia'
export const aCFG = defineStore('acfg', () => {
const txtColor= 'text-white'
const btnColor= ref( 'bg-yellow-500 hover:bg-yellow-400 text-black')
return { txtColor, btnColor}
})
en los componentes, si que me funciona al usar btnColor y txtColor, pero como comentaba, solo al momento de ponerlos manualmente, guardar documento, eliminarlos de nuevo y dejar en el elemento :class="cfg.btnColor")
Bueno, perdon jeje
Si no deberia hacerlo así, alguna sugerencia para tener en 1 documento los css para que cualquier cambio lo pueda hacer desde 1 documento, sin tener que andar modificando elemento por elemento ? (sucede que hice mi propio componente boton, y claro es el que utilizo; pero no es el unico, es por ello que me gustaria tenerlo asi :(
Saluds!
Hola Arthas! Para este tipo de gestiones de temas es mejor utilizar configuraciones de temas dinámicos dentro del vue.config. Algunos de cómo tailwind incluyen este tipo de controles de forma sencilla para lograr, por ejemplo, el clásico switch entre tema light y dark. Te recomiendo echarle un ojo 👌