/ vuejs

¿Como se utiliza Vuex?

¿Que es Vuex?

Es un patrón de gestión de estado basado en la arquitectura singleton que nos permite tener los datos centralizados y accesibles en cualquier componente dentro de la aplicación pero sin que puedan ser modificados sin algun control.

Vuex nos proporciona 3 estados básicos los cuales podremos apreciar en la imagen

  • State
  • Mutation
  • Actions
    vuex-cicle-life
    sin olvidarnos de los Getters que formaran parte importante de nuestro store

Lo principal para poder ocupar vuex es instalarlo con ayuda del siguiente comando:

npm install vuex  --save

Una vez que se realice la instalación procedemos a crear nuestra carpeta con el nombre de “store”, dentro crearemos el archivo principal ”index.js” el cual nos va a permitir acceder a los estados y poder darles una definición.
En este caso para poder explicarlo vamos a tener 2 tipos de información distinta de modo que sea mas claro el mostrarles cual es la mejor manera de manejar los archivos
Vamos a necesitar empleados y animales por lo que necesitamos crear una carpeta dentro de “store” de nombre “modules” y dentro de esta misma dos archivos uno “animales.js” otro “empleados.js”

Lo cual nos quedaria acomodado de la siguiente manera
vuex1

Dentro de empleados.js usaremos el siguiente código

El state va a ser nuestra variable la cual va a contener la información proveniente de algún request o de alguna fuente de datos

const state = {
  empleados: []
}

Los actions son necesarias puesto que Vuex tiene reglas para poder modificar la información y no podemos hacerlo directamente por lo que es necesario llamar a una acción la cual es posible realizar un request dentro de ella para poder traer información desde nuestro backend y hacer una llamada a las mutations

 const actions = {
    cargarDataEmpleados = ({commit}) => {
       TuRequest.getAll().then(data => {
          If (data.data) {
            commit ('SET_EMPLEADOS', data.data)
          }
       }
    }
 }

Las mutations nos permiten modificar el state por lo que cualquier tipo de cambio que se requiera asi sea una suma, agregar un campo, o asignar el valor es directamente y unicamente en esta seccion

const mutations = {
  'SET_EMPLEADOS' (state, empleados) {
    state.empleados = empleados
  }
}

Los getters son filtros para traer la informacion es decir si nuestros empleados esta compuesto por un json { name:"rafael", lastname:"arrieta", age: 28, ocupation:"cuidador de leones" } y nosotros solo queremos el nombre y su ocupacion podremos hacer un nuevo json apartir del estado solo con los datos necesarios

 const getters = {
   empleadosNombreOcupacion: state => {
     // es buena practica hacer una funcion aparte que se ocupe de la logica
     return sortFunction.empleadosNombreOcupacion(state.empleados)
   }
 }

Puedes poner todas las funciones que te ayuden a hacer un filtrado o a modificar la informacion del state para que te retorne los campos necesarios

   const sortFunction = {
   empleadosNombreOcupacion: (empleados) => {
     var empleadosFilatrado = []
     empleados.filter(emp => {
       let e = {
         name: emp.name,
         ocupation: emp.ocupation
       }
       empleadosFilatrado.push(e)
     })
     return empleadosFilatrado
   }
 }

Dentro de animales.js tendremos el siguiente codigo

 const state = {
   animales: []
 }
 
 const actions = {
    cargarDataAnimales = ({commit}) => {
       TuRequest.getAll().then(data => {
          If (data.data) {
            commit ('SET_ANIMALES', data.data)
          }
       }
    }
 }
 
 const mutations = {
   'SET_ANIMALES' (state, animales) {
     state.animales = animales
   }
 }
 
 const getters = {
   animalesCarnivoros: state => {
     return sortFunction.animalesCarnivoros(state.animales)
   }
}
 
 const sortFunction = {
   animalesCarnivoros: (animales) => {
     var animalesFilrtado = []
     empleados.filter(an => {
      if (an.type === 'carnivoro'){
         animalesFilrtado.push(e)
       }
     })
     return animalesFilrtado
   }
 }

Nos resta agregar estos archivos al index.js dentro de nuestra carpeta store

import Vue from 'vue'
import Vuex from 'vuex'
import empleados from '../modules/empleados'
import animales from '../modules/animales'

Vue.use(Vuex)

Vuex nos ayuda con los modules para no escribir todo el codigo dentro y que
se nos haga menos tedioso de entender y de realizar algun mantenimiento previo

exports default new Vuex.Store({
  modules: {
    empleados,
    animales
  }
})

Con lo anterior ya tenemos la información cargada en la tienda sin embargo aun no esta disponible para toda la aplicación debemos ir al archivo main.js donde deberemos agregar

import store from './store/index'

Y dentro de la instancia de Vue en la cual asignamos el componente debemos de agregar el store

(() => new Vue({
    el: ‘#app’,
    store,
   components: {App},
   template: ‘<App/>’
}))()

Ahora dentro de nuestros componentes ya podemos hacer uso de la store creada
Para acceder a los getters

this.$store.getters.tuGetter

Para acceder a los actions

this.$store.dispatch(tuAction, tuParametro)

Para acceder al state

this.$store.state.tuState

no se recomienda usarlo directamente es mejor tener un getter que solo te retorne el estado así aunque tu lo modifiques dentro del componente no afectas al state global.