Variables y Estados en Vue.js/Nuxt.js: Diferencias entre Local y Global

📌 Introducción

Si estás desarrollando una aplicación en Vue.js o Nuxt.js, es fundamental entender el manejo de variables y estados para optimizar el rendimiento y la organización del código. En este artículo, te explico las diferencias entre el estado local y el global, cuándo usar ref y cuándo usar Pinia, y cómo persistir datos en tu aplicación.

🔍 ¿Qué son las Variables y Estados en Vue.js?

• Variables: Son espacios de memoria con un nombre asignado que permiten almacenar y manejar información.
• Estado Reactivo: En Vue.js y Nuxt.js, un estado es una variable reactiva que sigue el patrón observador, lo que significa que cuando su valor cambia, Vue actualiza la UI automáticamente.

🔄 Estado Local con ref en Vue/Nuxt

Cuando una variable solo se usa dentro de un componente, lo mejor es manejarla con ref.

📈 Ejemplo de ref

<script setup>
import { ref } from 'vue'

const contador = ref(0)
</script>

<template>
  <button @click="contador++">Contar: {{ contador }}</button>
</template>

👉 Explicación:

• ref(0) crea una variable reactiva con un valor inicial de 0.
• contador++ incrementa el valor y actualiza la interfaz de usuario automáticamente.
• Este estado solo es accesible dentro del componente.

🌐 Estado Global con Pinia en Vue/Nuxt

Si necesitas compartir estado entre varios componentes, lo mejor es usar Pinia, la solución oficial para el manejo de estado en Vue.js.

📈 Ejemplo de Pinia

Definir un store global

// store.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

Usar el store en un componente

<script setup>
import { useCounterStore } from '@/store'
const store = useCounterStore()
</script>

<template>
  <button @click="store.increment()">Contar: {{ store.count }}</button>
</template>

👉 Explicación:

• Se usa defineStore para crear un estado global.
• state() define el valor inicial (count: 0).
• actions permite modificar el estado (increment()).
• Puede ser accedido y modificado desde cualquier componente.

⚙️ Comparación: ref vs Pinia

💪 Cuándo Usar Cada Uno

👉 Usa ref cuando el estado solo es relevante dentro de un componente específico.
👉 Usa Pinia si necesitas compartir el estado entre varios componentes o hacer una aplicación más robusta y escalable.

🛠️ ¡Bonus! Persistir Estado con Pinia

Para que los datos no se pierdan al recargar la página, Pinia permite la persistencia del estado con localStorage:

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  persist: true // Habilita persistencia en localStorage
})

👉 Ventajas de la Persistencia:

• Los datos permanecen tras actualizar la página.
• Mejora la experiencia del usuario.
• Se integra fácilmente sin necesidad de código adicional.

✅ Conclusión

Manejar el estado en Vue.js y Nuxt.js correctamente mejora la organización del código y el rendimiento de la aplicación. ref es ideal para estados locales, mientras que Pinia es clave para compartir datos entre componentes y hacer apps escalables. Si además necesitas persistencia, Pinia lo hace sencillo con localStorage.

👍 ¡Espero que esta guía te haya sido útil! Si tienes dudas, comenta o visita mis redes. 🚀