In an experimental Todo list app using pinia, I have a store State with a focusTaskId and taskById containing any locally-cached items, stored by their id.
How do I use v-model against one of the cached Tasks, given that it is not stored in a top-level key of the store?
interface State {
focusTaskId: string | null;
taskById: {
[k in string]?: Task;
};
}
export const useStore = defineStore("vault", {
state: (): State => ({
focusTaskId: null,
taskById: {},
}),
});
When an item is in focus, I want to bind the form to the corresponding Task stored under taskById within the store, using v-model. To do this, it must be a locally aliased writable property in the form component.
Unfortunately, to alias writable store properties, mapWritableState only accepts top-level keys from the store, such as ["focusTaskId"] or ["taskById"], and can't accept a general path expression e.g. [taskById['${id}']]
Is there a workaround so that I can dynamically bind my form via v-model to whatever object under taskById is currently focused, even though it is 'two levels down'?
I am coming from React and with my lauf store, I could partition a store for the taskById object, and bind from there using 'id' as the (new) top-level key. Perhaps there is an equivalent to derive a store from a child object of another store in pinia, then I can bind that new store at the top level?