verena-ifx / vue3-axios-idb-vuex-sync Goto Github PK

Vue3 Axios IDB Store Sync

Small projects that creates an Vuex store, populates it with backend data and stores the data in idb - then on next page refresh it only loads the delta!
Explore the docs »

View Demo · Report Bug · Request Feature

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

(back to top)

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

Axios is needed for this project and needs to be correctly configured. Here is the recommended configuration:

install package

npm install axios -save

in main.js

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

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

VITE_BACKEND_URL=http://localhost:8080/

(back to top)

endpointName: in these examples can be replaced to anything moduleName: for consistency normaly the same as endpoint name. This is the name of the Vuex store module

in store.js

import { createBackendIdbVuexDataSync } from 'vue3-axios-idb-vuex-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('moduleName/initialize');
   });
   ...
   function deleteItem(id) {
     store.dispatch('moduleName/delete', { id })
   }

This plugin expects the following endpoints under your backend URL:

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

These are currently not configurable for consistency reasons. If you have a legacy API and need other endpoints feel free to make a pull request :)

Needs to be called to initialize the module on application startup. All parameters are optional Parameters: showSuccess: default true. Determinates if the successCallback should be called. initData: Array of Entities that (can be) loaded from another source. This should normaly not be used. Used in case we bundle initialization requests to the backend into one init call. initCacheData: Same use case as above but contains data from idb

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

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

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

(back to top)

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

(back to top)

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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Distributed under the MIT License. See LICENSE for more information.

(back to top)

kaiwerther - [email protected] / [email protected]

Project Link: https://github.com/kaiwerther/vue3-axios-idb-vuex-sync

(back to top)