Having trouble with $subscribe

[cjbathras]

I have a store that has a Map in it's state like so:

export const useItemsStore = defineStore('itemsStore', {
  state: () => {
    return {
      itemsMap: new Map<string, Item>()
    }
  }
});

Elsewhere in my code I receive messages that update the items in my store like so.

let itemsStore = useItemsStore();
let items: Item[] = getItems();
items.forEach((newItem) => {
  itemsStore.itemsMap.set(newItem.id, newItem);
});

Finally, in a third place in my code, I've $subscribed'd to changes in my itemsStore. The behavior I expected is that each time itemsStore.items was mutated using .set(..), an event would be triggered such that if there were 3 items in the items array, I would get 3 events. However, what I see is that the entire forEach loop finishes and then a single mutation event is fired and in mutation.events.newValue all I see is the last item that was processed in the array. Is my understanding of how $subscribe works wrong?

[posva]

Use a { flush: 'sync' } option to $subscribe(). It works like Vue watchers.

[cjbathras]

Thanks, I'll give that a shot. Where are the $subscribe() options documented?

[posva]

https://pinia.vuejs.org/api/modules/pinia.html#subscriptioncallback (use the search in docs, it's pretty nice)

[cjbathras]

I added the {flush: 'sync'} option and that worked. Thank you for that!

I took a look at the docs you linked to above and sorry for being dense, but I don't see where the actual options are documented. There is no mention of flush that I can find. A list of available options and what they can be set to would be very helpful. The API was actually the first thing I consulted when I had this question, but I couldn't find info about the $subscribe function.

[bertBruynooghe]

Options of$subscribe are to be found in the Vue documentation itself: https://vuejs.org/guide/essentials/watchers#callback-flush-timing