QuaStore
Persistent browser-side state management module.
This package was developed primarily for the needs of QuaEngine, but it also supports the standalone usage.
Features
-
Presistent state management, APIs are inspired by
vuex
. -
Multi-Slot Continuous Storage.
-
Provide composition APIs for convenience.
-
TypeScript supported.
Usage
How to create a store
Step 1: Install this package from npm
.
npm i @quajs/store -S
Step 2: Create store.
import { QuaStoreManager } from '@quajs/store';
QuaStoreManager.createStore({
name: 'my-store',
state: {
value: 0,
},
mutations: {
setValue(state, payload) {
state.value = payload;
},
},
});
Step 3: Use store at anywhere.
import { useStore } from '@quajs/store';
const store = useStore('my-store');
// or
import { QuaStoreManager } from '@quajs/store';
const store = QuaStoreManager.getStore('my-store');
store.commit('setValue', 1);
console.log(store.state.value); // 1
Also, you can instantiate a standalone store for more flexible usage.
const store = new QuaStore('store-name', {
state: {},
mutations: {},
getters: {},
});
The standalone instance cannot be indexed by QuaStoreManager
, so the manager methods will not be effected on this instance.
Persist and restore data
QuaStore is using dexie
(An IndexedDB wrap) to persist data.
await store.persist(1);
Store instance can persist state to a certain slot, like the save in a video game.
Using the restore
method can restore the persisted state to store.
await store.restore(1);
If parameter slot
is a number
, it cannot be smaller than 1. If you want to use a customize name, string
is also acceptable for slot
.
In general usage, restore
often be called in initializing process, if you want to use the persisted state in database to overwrite the current ones, a force
option is required.
await store.restore(1, { force: true });
Compatibility Warning
QuaStore
used Proxy
to proceed getters
in store, please be sure that the clients are compatible with Proxy
.
License
MIT