[Vuejs]-Pinia shared reactivity in stores

by

1👍

✅

Remember pinia states are reactive objects.

Therefore, you can always set a computed on one of them which references another store’s state.

Generic example:

const useStoreOne = defineStore('one', {
  state: () => ({
    foo: 'bar'
  })
})

const useStoreTwo = defineStore('two', {
  state: () => ({
    foo: computed({
      get() { return useStoreOne().foo },
      set(val) { useStoreOne().foo = val } 
    })
  })
})

Note: storeToRefs does the same as above. So you can write storeTwo as:

const useStoreTwo = defineStore('two', {
  state: () => ({
    foo: storeToRefs(useStoreOne()).foo
  })
})

But it’s kind of pointless. Why would you want to use useStoreTwo().foo anywhere instead of using useStoreOne().foo directly?

Make no mistake: the above pattern sets a two-way binding between the two store’s foos. But, the second store’s foo is useless. Anywhere you use it, you could be using the first one’s foo directly.

On general principles, when you come across this pattern (or across the need for it), it should raise a flag: you’re using state management because you want "one source of truth". Not more.

👤tao

Leave a comment