@highdeserttechnologies/client-pinia-vue-sdk
v2.0.10
Published
A wrapper of the client-entities interactions using Vue and its Pinia state management.
Downloads
33
Readme
@freakingreallyawesomenocode/client-pinia-vue-sdk
Overview
This package is an adapter which binds the FRANk change feeds / change streams to Vue and Pinia stores to assist in UI development
Usage
The SDK exports 4 items:
- useEventActivityStore (The pinia store function for event activity)
- useItemBiddingStore, (The pinia store function for item bidding activity)
- EventRuntimePiniaVueSdk, (The main-level vue sdk that initializes and keeps the 2 above items up to date)
- eventRuntimeApiSdk (The REST api singleton for writing data into the event runtime (ex: bidding))
Here is an example of how the sdk is instantiated:
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import { eventRuntimeApiSdk, EventRuntimePiniaVueSdk, useEventActivityStore, useItemBiddingStore } from '@freakingreallyawesomenocode/client-pinia-vue-sdk';
const BIDDING_SERVER_URL = 'http://localhost:4030';
const DELTA_SERVER_URL = 'ws://localhost:9001';
// NOTE: Pinia and the app must be attached prior to setup/initialization of the event runtime sdk
const pinia = createPinia();
const app = createApp(App, { BIDDING_SERVER_URL, DELTA_SERVER_URL });
app.use(pinia);
useEventActivityStore();
useItemBiddingStore();
const customAuthHeaderFn = async function(){
return Promise.resolve({Authorization: 'Bearer jwt.token.here'});
}
// The api sdk allows the user to set an async customHeader function which will be applied for REST Api calls into the sdk.
eventRuntimeApiSdk.customHeaderFn = customAuthHeaderFn;
eventRuntimeApiSdk.baseBiddingUri = BIDDING_SERVER_URL;
const sdk = new EventRuntimePiniaVueSdk(BIDDING_SERVER_URL, DELTA_SERVER_URL);
await sdk.initialize();
await sdk.watchEvents(['event-10000', 'event-20000', 'event-30000']);
app.mount('#app');
Reference
An example pinia item bidding store is below:
import { ref } from 'vue';
import { defineStore } from 'pinia';
import { applyPatch } from 'fast-json-patch';
export const useItemBiddingStore = defineStore('itemBiddingStore', () => {
const items = ref({});
function addItemBidding(itemBiddingModel) {
this.items[itemBiddingModel.id] = itemBiddingModel;
}
function updateItemBidding(id, itemBiddingModel) {
this.items[id] = itemBiddingModel;
}
function removeItemBidding(id) {
delete this.items[id];
}
function applyJsonPatch(id, jsonPatch) {
applyPatch(this.items[id], jsonPatch, false, true);
}
return {
items,
addItemBidding,
updateItemBidding,
removeItemBidding,
applyJsonPatch
}
})
Note that the contents of these stores match the datamodel that is in the database directly - no changes or mutation. The contents are also live updated/added as changes/inserts to the database are written.