Vuexinette

¿ Qué es vuexinette ?

Vuexinette es una pequeña libreria que facilita el manejo de operaciones CRUD en vuex se basa en la normalizacion de estado inspirado en Redux con la ayuda de normalizr

Instalacion

Instalación en los modulos

El primer paso es realizar la instalacion en los modulos principales del store, con esto vuexinette agrega el modulo 'entities' necesario para el manejo de datos normalizados

// store.js

import Vuexinette from 'vuexinette';
import modules from './modules';

const store = new Vuex.store({
  modules: Vuexinette.install(modules),
});

export default store;

Creacion de entities

Las entities son usadas por los plugins que requieren realizar requests a la API, cada entity cuenta con un 'client' asociado el cual se encarga de realizar las peticiones y normalizar los datos basados en el schema dado

//  entities/clients.js

import Vuexinette from 'vuexinette';

export default Vuexinette.Entity({
  name: 'carBrands',
  client: {
    url: '/v1/carBrands',
  },
  schema: {
    // normalizr schema
  },
});

Instalación de plugins

Los plugins contienen toda la logica de los modules (state, action, mutations y getters), cada plugin se encarga de una sola cosa en específica de manera eficáz, en este caso usamos el fetchableList el cual permite obtener datos de una entity en su ruta base /clients ademas de que permite la paginacion de los mismos, al hacer la instalacion Vuexinette solo hace un assign de la lógica que tiene el plugin agregandola al modulo específicado, se puede instalar multiples plugins a un modulo.

// modules/clients.js

import Vuexinette from 'vuexinette';
import fetchablePlugin from 'vuexinette/dist/plugins/fetchableList';

const module = {
  namespaced: true,
};

Vuexinette.installPlugin(module, fetchablePlugin, { entity });

export default module;

Plugins

fetchableList

Permite obtener datos de una entity en su ruta base y paginar

install

Vuexinette.installPlugin(module, fetchableList, {
  entity: !Entity, // entity usada en el modulo,
  request: {
    // Opciones para realizar el fetch (axios)
  },
});

state

{
  isFetching: Boolean, // Indica si hay un request en proceso
  fetchError: Error, // Error del ultimo request
  ids: Integer[], // Array de ids obtenidos
  pagination: {
    page: Integer, // Página actual,
    perPage: Integer, // Entities por página,
    total: Integer, // Total de entities,
  },
  filters: {
    ...filters // keys y values que serán enviados como query params para filtrar
  },
}

actions

async fetch(params Object) // Realiza el fetch
async fetchNextPage(params Object) // Realiza el fetch de la siguiente página
addFilter(filter Object) // Agrega uno o varios filtros usando la key y valor especificados
clearFilters() // Limpia todo los filtros

getters

all Object[] // Lista de entities _desnormalizadas_
currentPage Integer // Página actual
pagesCount Integer // Cantidad de paginas
hasMorePages Boolean // Indica si hay mas páginas

fetchable

Permite obtener datos de una entity en su ruta show /clients/:id

install

Vuexinette.installPlugin(module, fetchableList, {
  entity: !Entity, // entity usada en el modulo,
  request: {
    // Opciones para realizar el fetch (axios)
  },
});

state

{
  isFetching: Boolean, // Indica si hay un request en proceso
  fetchError: Error, // Error del ultimo request
  id: Integer, // Id del entity
  lastFetch: String, // DateTime del ultimo fetch
}

actions

async fetch({ id, params }) // Realiza el fetch

getters

data Object // Data _desnormalizada_ de la entity

creatable

Permite realizar las creación de nuevas entities aka POST

install

Vuexinette.installPlugin(module, fetchableList, {
  entity: !Entity, // entity usada en el modulo,
  request: {
    // Opciones para realizar el fetch (axios)
  },
});

state

{
  isCreating: Boolean, // Indica si hay un request en proceso
  createError: Error, // Error del ultimo request
}

actions

async create(formData) // Ejecutar el POST