Simple vuex - jsonapi connector.

Overview

vuex-jsonapi

Simple vuex - jsonapi connector.

Specs:

  1. The library should be able to request any jsonapi server with several configuration files describing the models. The responses should be formatted for vuex latter using, as models define. The requests should be defined in the same way.

  2. The library offers two different APIs: jsonapi and vuex. Utilities to ease the use of jsonapi server implementation. And some vuex actions and getters for these entities.

  3. The library should accept configuration objects in this way:

/* ******** OPERATION MODULE **************/
const operationConf = {
  type: 'node--operation',
  attributes: {
    title: {
      type: 'string',
      required: true,
      isArray: false,
      name: 'title',
    }
    ,
  },
  relationships: {
    pledges: {
      type: 'node--pledge',
      required: false,
      isArray: true,
      name: 'pledges',
    },
  }
};

const moduleOperation = {
  baseUrl: 'url',
  name: 'pledges',
  entities: [operationConf],
};

/* *************** PLEDGE MODULE ***********/
const burdenConf = {
  type: 'node--burden',
  attributes: {
    title: {
      type: 'string',
      required: true,
      isArray: false,
      name: 'title',
    }
    ,
  },
  relationships: { }
};

const plegdeConf = {
  type: 'node--pledge',
  attributes: {
    title: {
      type: 'string',
      required: true,
      isArray: false,
      name: 'title',
    }
    ,
  },
  relationships: {
    burdens: {
      type: 'node--burden',
      required: false,
      isArray: true,
      name: 'burdens',
    },
  }
};

const modulePledge = {
  baseUrl: 'url',
  name: 'pledges',
  entities: [burdenConf, plegdeConf],
};

/* ****************** Register ******/
import { vuexAdapter, jsonapiAdapter } from 'vuex-jsonapi';
import store from './store';

// You can use this object to perform http requests against jsonapi server.
const operationJsonapiService = jsonapiAdapter.createService(moduleOperation);

// You can use this object to initialize a vuex module. If you pass in a jsonapiService
// then the module should perform http request when several actions are dispatched.
const operationVuexModule = vuexAdapter.createModule(moduleOperation, operationJsonapiService);

store.registerModule(operationVuexModule);

vuexAdapter API

The vuexModule created with vuexAdapter.createModule function should return a valid object to initialize a new vue store module.

For example, if you try with

  • const operationVuexModule = vuexAdapter.createModule(moduleOperation)

it should return:

{
    state: {
        operation: {
            ids: [],
            entities: {},
        },
    },
    mutations: {
        CLEAR_MODULE,
        UPSERT_ENTITY,
        REMOVE_ENTITY,
    },
    actions: {
        clearModuleAction,
        upsertOperationAction,
        removeOperationAction,
    },
    getters: {
        // TODO find where to place getById, find, etc.
    },
}

You can try something more complicated:

import { vuexAdapter, jsonapiAdapter } from 'vuex-jsonapi';

const pledgeService = jsonapiAdapter.createService(modulePledge);
const pledgeVuexModule = vuexAdapter.createModule(modulePledge, pledgeService);

pledgeVuexModule should return:

{
    state: {
        pledge: {
            ids: [],
            entities: {},
        },
        burden: {
            ids: [],
            entities: {},
        },
    },
    mutations: {
        CLEAR_MODULE,
        UPSERT_ENTITY,
        REMOVE_ENTITY,
    },
    actions: {
        clearModuleAction,
        upsertPledgeAction,
        removePledgeAction,
        upsertBurdenAction,
        removeBurdenAction,
    },
    getters: {
        // TODO find where to place getById, find, etc.
    },
}

In this case, when the library performs the upserts or removes actions, then library should use the jsonapiAdapter service to do the appropriate http requests.

jsonapiAdapter API

The jsonapiService created with jsonapiAdapter.createService function has the following structure:

{
 fetch(id) // fetch entity by id
 fetchAll() // fetch all entities
 create(payload) //create entity
 update(payload) // update entity
 upsert(payload) // update or create entity
 remove(id) //remove entity from colection    
}
  1. jsonapiService#fetch // TODO
  2. jsonapiService#fetchAll // TODO
  3. jsonapiService#create // TODO
  4. jsonapiService#update // TODO
  5. jsonapiService#remove // TODO

Future

  1. Prefetch related models.
  2. Mode cache.
  3. Enable Offline.
  4. Extensibility: Middlewares for processing and formatting. Middlewares for Authentications models. Create vuex modules with customs properties, mutations, actions and getters.

Authors

Alejandro Garrido / Alejandro Manjón Boream

You might also like...
A utility to simplify the use of REST APIs with Vuex

vuex-rest-api A Helper utility to simplify the usage of REST APIs with Vuex 2. Uses the popular HTTP client axios for requests. Works with websanova/v

cache vuex action when dispatch

vuex-cache Cache dispatched actions and prevent repeated requests and heavy actions. Compatibility Map and Promise are required (you can use polyfills

A Vuex plugin to persist the store. (Fully Typescript enabled)

vuex-persist A Typescript-ready Vuex plugin that enables you to save the state of your app to a persisted storage like Cookies or localStorage. Info :

vuex plugin

vuex-local-state inject localStorage to vuex Installation $ npm install vuex-local-state --save API new VuexLocalState(storeOptions, [conf]); conf def

NOT MAINTAINED Scaffold vuex actions, mutations, getters and the state

NOT MAINTAINED vuex-cli-scaffold Generating module entities for your Vue.js store is repetitive and verbose. This packages lets you create one or mult

Vue and Vuex plugin to persistence data with localStorage/sessionStorage

vuejs-storage Vue.js and Vuex plugin to persistence data with localStorage/sessionStorage Purpose This plugin provide a simple binding with localStora

Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x.

vuex-async-module Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x Installation npm install @liqueflies/vuex-async-mod

Deprecated - Effortlessly handle api calls with vuex without repeating yourself.

Deprecated Not maintenained anymore. Vuex api Intro vuex-api is a library that wants to help you handle API as easily as possible. Yes, that's it ! In

Vuex state synchronization between iframe/window

vuex-iframe-sync English | 中文 Vuex state synchronization between iframe/window Your star is the greatest encouragement to me. ✨ Features: support ifra

Owner
Boream
Empresa consultora informática
Boream
The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.

Vuex ORM ?? HEADS UP! Currently, Vuex ORM Next project is on going, and we are hoping it is going to be the foundation of the version 1.0.0 release. W

Vuex ORM 2.4k Jan 9, 2023
Vuex-Queries helps you write query functions in Vuex

Vuex-Queries Vuex-Queries helps you write query functions in Vuex Usage Write your queries in Vuex options: const options = { state: { events: [

Wu Haotian 12 Dec 15, 2018
[NO LONGER MAINTAINED] `vuex-dry` helps keep your vuex codes DRY.

NO LONGER MAINTAINED This repository is not actively maintained. I haven't used this package for a year. It means there has been no change. You can st

Eunjae Lee 53 Dec 28, 2022
Vue / Vuex plugin providing a unified path syntax to Vuex stores

Overview Pathify makes working with Vuex easy, with a declarative, state-based, path syntax: Paths can reference any module, property or sub-property:

Dave Stewart 1.4k Dec 14, 2022
A Vuex plugin that easily maps Rails resources to Vuex modules

VuexRailsPlugin A Vuex plugin that easily maps Rails resources to Vuex modules The idea of this plugin is to easily incorporate conventional rest endp

Richard LaFranchi 1 Dec 27, 2018
A very simple, elegant and easy alternative to vuex within less than 1.5kb

A very simple, elegant and easy alternative to vuex within less than 1.5kb

Emanuel Capurro 1 Oct 17, 2022
💾 Persist and rehydrate your Vuex state between page reloads.

vuex-persistedstate Persist and rehydrate your Vuex state between page reloads. Install npm install --save vuex-persistedstate The UMD build is also a

Robin van der Vleuten 5.8k Jan 5, 2023
A plugin for syncing Vuex store with js-data

vuex-jsdata-plugin A simple attempt to help using jsdata alongside Vue.js: This plugin syncing Vuex store with js-data After each injection made by js

Alexandre Bonaventure Geissmann 20 Jul 30, 2020
Local state management within Vuex

vuex-local Local state management within Vuex Why? Global state management is one of the problems on huge application development. Developers address

Katashin 64 Nov 11, 2022
:hammer: Utilities for vuex to easily create and manage actions.

vuex-action Utilities for vuex to easily create and manage actions. Allow you to create untyped action Support for Promise Work with [email protected] and [email protected] I

varHarrie 27 Mar 26, 2021