In-store setup

[fl0cke]

What problem is this solving

Sometimes i need to react to changes to the state in a more granular way that is completely decoupled from the component that uses the store. For example, consider this simple use case:

export const useStore = defineStore('store', {
  state: () => ({
    start: null,
    destination: null,
    route: null,
  }),
  actions: {
    async fetchRoute() {
      // fetch route
    },
  },
})

Whenever start or destination changes, i want to fetch a new route, e.g.

watchEffect(() => {
  if (store.start && store.destination) {
    store.fetchRoute()
  }
})

There is currently no option to put this in the store directly. So i either have to pick a component to include the watcher or put it in app.ts where the store is created.

Proposed solution

Add a setup() like method to the store where i can put watchers and other initialization logic.

e.g.

export const useStore = defineStore('store', {
  state: () => ({
    start: null,
    destination: null,
    route: null,
  }),
  actions: {
    async fetchRoute() {
      // fetch route
    },
  },
  setup() {
    watchEffect(() => {
      if (this.start && this.destination) {
        this.fetchRoute()
      }
    })
  }
})

Describe alternatives you've considered

• $subscribe:
  • requires a store instance
  • is triggered on every state change
• put the watcher in app.ts or any component that uses the store
  • can get messy really quickly when you have multiple watchers for different stores

[posva]

This is actually already supported with the setup syntax:

export const useStore = defineStore('store', () => {
  const start = ref(null)
  // ...

    async function fetchRoute() {
      // fetch route
    }

    watchEffect(() => {
      if (start.value && destination.value) {
        fetchRoute()
      }
    })
  return { start, destination }
  }
})

There is currently only one example of this in docs: https://pinia.esm.dev/introduction.html#basic-example and it's tracked at #829 to add more

[dmolesUC]

@posva Is there a way to use the setup syntax to listen for whole-state changes cf. $subscribe()? (I mean, I can see ways to do it with additional layers of ref() but it feels like that would make read access to the store significantly messier.)

[posva]

No, You can simply use a watcher

[dmolesUC]

Passing an explicit list of refs (as per these docs), you mean, like this?

watch([start, destination, route], ([newStart, newDestination, newRoute]) => {
  // ...
})

Or is there anything simpler / less repetitive? Would something like this work?

const storeDef = { start, destination, route }
watch(reactive(storeDef), (v, _) => {
  // do something with v.start etc.
})
return storeDef