I have created a plugin for subscribing to all the Stores State and when the state change it's saved to indexedDB
The plugin is:
import ofcDB from 'boot/indexeddb';
export async function IndexedDbPlugin(context) {
context.store.$subscribe((mutation, state) => {
const toStorage = serializer.serialize(state));
ofcDB.collection(storeName).doc(storeId).set(toStorage);
});
}
With this plugin registered as pinia.use(IndexedDbPlugin); it is assumed that when each Store changes its state, it should be stored in indexedDB.
It works fine when I make changes in a single Store but when for example simultaneous changes are made in 2 Stores it only updates one.
For example I have 2 Stores (ProjectStore and GoalStore) and when I create a Goal in a project it is created in GoalStore and added to ProjectStore.
These operations are performed from GoalStore:
import { useProjectStore } from "../project/ProjectStore";
export const useGoalStore = defineStore("GoalStore", {
state: () => ({
goals: null,
}),
actions: {
createItem(Goal) {
this.goals.push(Goal);
const ProjectStore = useProjectStore();
ProjectStore.addItem(Goal);
}
}
})
So, when the createItem method is called:
- The Goal is added to the GoalStore State.
- The ProjectStore addItem method is called, which in turn updates the state in ProjectStore.
The problem is that only the state of ProjectStore is updated in indexedDB and not the state of GoalStore when $subscribe should work for both.
Am I omitting some important detail?
Thanks