@quajs/store v0.1.0
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