How do I identify which property in the state was mutated?

[cjbathras]

Hi,

I have defined my store like this:

export const usePlatformStore = defineStore('platformStore', {
  state: () => {
    return {
      platformPositions: new Map<number, PlatformPosition>(),
      platformToMarkerIds: new Map<number, number>(),  
      platformColors: new Map<number, string>()  
    }
  }
})

I $subscribe to the state of the store to watch for changes with something like this:

platformStore.$subscribe((mutation: any, state: any) => {
  updatePlatforms(mutation, state)
})

In the updatePlatforms function, I need to perform different actions depending on which property changed in the platformStore. For example, if the platformPositions property has changed, I need to update the position of a platform in the UI. Or if the platformColors property has changed, I need to update the color of the platform in the UI. I've taken a look at mutation in the debugger and cannot see anything that tells me which property changed in the platformStore. I can see the store ID is platformStore, but that doesn't help me. I can see the oldValue and newValue, but I have to infer which property changes from that. I'd like to use something that explicitly tells me which property changed. Am I missing something really obvious here?

[posva]

I would directly use a watcher instead:

watch(() => store.platformPositions, (positions) => {
  // ...
})

[cjbathras]

Are you referring to a Vue watcher? I don't see anything about a watcher in Pinia's docs. Would I do something like this:

watch(
  pinia.state.platformPositions,
  (platformPositions) => {
    // do something based on platformPositions changing
  }
)

[posva]

I updated the comment with an example.
Yes, you can use the Vue APIs as well, after all, pinia state is just Vue refs and reactive objects

[cjbathras]

Thank you!