Using mapWritableState() with v-model for nested properties

1.4k Views Asked by At

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?

0

There are 0 best solutions below