Aprende a crear tu propia Global State utilizando Vue Composition API

Cuando tu aplicación empieza a tener muchos componentes y necesita pasarse información entre ellos y el hacerlo se vuelve un poco problemático es cuando se opta por utilizar una Global State dentro de tu app, por ejemplo el más utilizado en Vue es Vuex, y el más reciente Pinia (que en realidad fue un experimento dentro del mismo Team de Vue). En este tutorial aprenderás como crear tu propia Global State de forma sencilla utilizando la nueva API de Vue, la Composition API.

Pre requisitos

• Vue 2 con la dependencia de @vue/composition-api; ó
• Vue 3

Creando tu store

Crea tu archivo store.js o store.ts dependiendo del caso donde lo necesites, el truco está en importar la función reactive de la nueva API pues es la que hará la tarea de trackear los cambios a nuestra GlobalState. Para ello lo importamos así:

// Así en el caso de Vue 3import { reactive } from'vue'// Así en el caso de Vue 2 con la dependencia de @vue/composition-apiimport { reactive } from'@vue/composition-api'

Acto seguido creamos nuestro objeto global que va a contener todas propiedades reactivas, en este caso haremos algo similar a como funciona Vuex sin utilizar dicha dependencia.

// Utilizando la propiedad reactive sería asíconst state = reactive({
  count: 0,
  characters: []
})

// Y si lo comparamos con Vuex sería algo similar a:const store = new Vuex.Store({
  state: {
    count: 0,
    characters: []
  }
})

/*
* Vemos que la diferencia es mínima en la forma de inicializar nuestra GlobalState 
* salvo que la diferencia será que podremos separar en objetos diferentes nuestros 
* getters, mutators y actions en lugar de un objeto global como en Vuex.
*/

Getters

Para los getters haremos algo similar que con Vuex, realizaremos un objeto con las funciones que obtendrán la propiedad específica y la retorna en donde sea que lo necesitemos, en este caso necesitaremos de la función toRef para retornar una propiedad en específica para que la Composition API lo reconozca como una propiedad reactiva:

// Así en el caso de Vue 3import { reactive, toRef } from'vue'// Así en el caso de Vue 2 con la dependencia de @vue/composition-apiimport { reactive, toRef } from'@vue/composition-api'

exportconst getters = {
  getCount () {
    /* Necesitamos indicar de que objeto tomará la propiedad, y como segundo 
    *  parametro la propiedad que necesitamos hacer reactiva
    */return toRef(store, 'count')
  },
  getCharacters () {
    return toRef(store, 'characters')
  }
}

Mutations

Para modificar una propiedad haremos algo similar que con Vuex, aunque no es necesario y podemos modificar el objeto directamente pero lo haremos así para llevar un patrón similar:

exportconst mutations = {
  increment () {
    store.count++
  },
  setCharacters (payload) {
    store.characters = payload
  }
}

Actions

Para las funciones específicas, ya sea para obtener algo de una API y guardarlo dentro de la store, en este ejemplo agregué dentro de la store una propiedad llamada characters el cual utilizaremos para obtener los personajes de la API de Rick n Morty:

exportconst actions = {
  asyncinit () {
    const response = await fetch('https://rickandmortyapi.com/api/character')
    const data = await response.json()
    mutations.setCharacters(data.results)
  },
  // Aquí puedes poner el resto de las funciones que llegues a necesitar
}

Y listo, así de sencillo podemos crear nuestra store utilizando la nueva Composition API que nos da mucha libertad de como generar soluciones muy geniales. Si quieres ver el proyecto en acción aquí te dejo el link del repositorio de como podría funcionar utilizando tu store (lo hice con Vite 👀)