Vue3-axios-idb-store-sync NPM

About The Project

This vuex store module aims to provide basic CRUD functionality for large datasets.

Features:

Stores data in idb at client side and synchronizes the idb on startup with the backend. Only changed entites will be loaded.
Indexes entites by ID
Provides Get, Delete, Save, Create functionality
We lowered initial page loading from 9 seconds to 200 ms

Getting Started

Installation

npm install vue3-axios-idb-store-sync -save

usage

We expect your Vue3 project uses axios.

It is recommended to use environment variables.

in main.js

axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;

in .env.development (+ .env.production)

VITE_BACKEND_URL=http://localhost:8080/

in store.js

import { createBackendIdbVuexDataSync } from 'vue3-axios-idb-store-sync';
...
export default createStore({
 modules: {
   moduleName: createBackendIdbVuexDataSync(
       { endpoint: endpointName },
     )
   },
});

in any component

   import { onMounted, computed } from 'vue';
   import { useStore } from 'vuex';
   ...
   const allEntites = computed(() => store.getters['moduleName/all']);
   ...
   onMounted(() => {
    store.dispatch('tags/initialize');
   });
   ...
   function deleteItem(id) {
     store.dispatch('moduleName/delete', { id })
   }

backend API needed

This plugin expects the following endpoints under your backend URL:

POST /endpoint/ Creating an new entity Expects entity as JSON in body Returns saved entity as JSON
GET /endpoint/ Get a list of ALL entities - as JSON list
GET /endpoint/?lastCacheUpdate={timestampInMs} Get a list of all entities that have been changed since {timestampInMs} - as JSON list
PUT /endpoint/{itemId} Saves an existing entity Expects entity as JSON in body Returns saved entity as JSON
DELETE /endpoint/{itemId} Deletes an entity Expects no body and returns nothing

TODO: make this configurable

frontend API

Options

endpoint

endpoint where client looks for when calling the backend

afterUpdateCallback

this callback will be called whenever an item was saved Parameters: 1. store 2. saved entity the backend sends

initDataCallback

This callback will be called after initialization for every NEW entity. This callback is used to transform entites and to do expensive precalculations. For example: Date formating and status calculations There is no need to make a deep copy of the entity. Just add / change new properties and return the entity. Parameters: 1. ONE new entity the backend sends

Getters

moduleName/all

returns an array of all entites

moduleName/byId

returns one entity by its id. Parameters: Object with id property

Actions

moduleName/initialize

Needs to be called. Can be called multiple times. Will only load once. Parameters: none

moduleName/update

Updates one entity by its id. Also removes it from IDB Parameters: Object with id property. Will be send like this to backend.

moduleName/add

Creates one entity. Also removes it from IDB Parameters: Object that will be send like this to backend.

moduleName/delete

Deletes one entity by its id. Also removes it from IDB Parameters: Object with id property

Roadmap

Add more customizability
Add live sync

See the open issues for a full list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!