Subscribe example

[husayt]

İ am trying to implement auto serialising store to localstorage. From some discussions I understand that best way to do it is with subscribe in a plugin.

But I could not find any doc or example on subscribe method.

Would appreciate for any tip.

Thanks

[posva]

At the end $subscribe is just a watcher, so the best is to use a watch on the pinia state

const pinia = createPinia()
watch(pinia.state, handler, { deep: true })

The handler would write to local storage.

It's also at the handler level that one should check for specific stores' state as they are created on the fly as they get used. This means that when the watcher is created, it's observing an empty object (pinia.state.value). You could still watch a specific store with

// given defineStore({ id: 'myStore' })
watch(() => pinia.state.value.myStore, handler, { deep: true })

[husayt]

As I have multiple stores, I need just one of them (the one called storage) to be auto serialised. Here is how I implemented this.

const unwatch = watch(
  pinia.state,
  (x) => {
    unwatch()
    watch(
      x.storage,
      (storageState) => {
        localStorage.setItem(storageKey, JSON.stringify(storageState))
      },
      { deep: true }
    )
  },
  { deep: true }
)

[kassuro]

As I have multiple stores, I need just one of them (the one called storage) to be auto serialised. Here is how I implemented this.

const unwatch = watch(
  pinia.state,
  (x) => {
    unwatch()
    watch(
      x.storage,
      (storageState) => {
        localStorage.setItem(storageKey, JSON.stringify(storageState))
      },
      { deep: true }
    )
  },
  { deep: true }
)

Have you tested to just watch the one specific store state directly instead of watching pinia? Seems more complicated than needed.

I would think that this would work as well:

const storageStore = useStorageStore()
const unwatch = watch(storageStore.state, () => /*your callback */, { deep: true })

[husayt]

Hi @kassuro ,
if I just do as you suggested, x.storage is undefined. Seems it needs one round to register all dependencies.

[posva]

You need the function syntax of the watcher:

const storageStore = useStorageStore()
const unwatch = watch(() => storageStore.$state, () => /*your callback */, { deep: true })

[douglasg14b]

Will this work outside of the vue instance for subscriptions?