Subscribe / watch from inside a store?

[sockenklaus]

Hi,

is it possible to use a subscribe / watch function inside (!!!) a store?
I use actions in my stores to get / post data from and to my API.
It would be great to use a subscribe / watch that triggers the API operations whenever the relevant state changes but I want that to work within the store itself and I haven't figured a way to do this.

I understand how to use (and in fact do use) subscribe / watch in my components but I don't see a way to offload this behaviour from component to store.

[posva]

Use a setup store instead, it's like a component but without a template:

defineStore('id', () => {
  const userId = ref(0)
  // other state properties
  // ...
  watch(userId, doStuff)
  function doStuff() {
    // ...
  }

  // expose anything you need
  return { state }
})

[WilliamStam]

also keen to know. been using some hacky ways to watch the store state (high level component that just does store watching)

would be really cool to have a watch in the store itself. like change the state then action is called.

havent been able to figure out how to use the "composing store" yet with actions / getters and a "state" thats not based on destructing everything in the right order.

a use case "whenever the state.account is changed then local storage it" (when state key changes then call action). im pretty sure this must be a very common pattern. if the store is ment to be reusable then not having it on the store itself seems a bit wrong.

[theoephraim]

For those users who prefer the options syntax, it's a bit annoying to be forced to switch everything over to add a single watcher. While a watch option/key as suggested here could certainly work, it seems some more generic hooks to call functions on setup / teardown (similar to onMounted and onBeforeUnmount) would be super helpful. While it could maybe be handled with a plugin, it seems like having it built-in would be simpler, cleaner, and keep things more idiomatic across codebases.

@posva - where is the right place to discuss this? In vuejs/rfcs or here? Despite the docs mentioning an rfc process I could not find a link to where this will take place...

PS - Thanks so much! Happy to see pinia become the new standard <3

[SetsuikiHyoryu]

@posva
When using watch, I usually stop it in onBeforeUnmount, but I found that this lifecycle hook doesn't work in Pinia. So, how can I stop watch in Pinia? Or if there's no need to stop watch in Pinia, is there any specific reason for that?

[hyrumwhite]

This is old, but to answer the getters and actions question, those are just computed vars and methods in a setup store. State is just refs and reactives. You return it all in an object then use the store as normal.

[hyrumwhite]

@SetsuikiHyoryu in a store you probably don't want to stop watching. But if you do it should be tied to a specific action or request. I.e. when the user leaves the route they're on you may not need to watch something anymore. But then you'll also need to know when to watch again.

Components will clean up their own watches automatically on unmount, btw.

[kissu]

Hi, I want to follow this Subscribing to the state example to have a global watcher defined inside of a store but defined with the Options API old-fashioned way but I do have an error (tried to import $subscribe but it's not defined).

Here is what I got so far

export const useLayersStore = defineStore('layers', {
  state: () => ({
    trackMe: 'please track me',
  }),
})

useLayersStore.$subscribe((mutation, state) => {
  console.log('tracked!')
})

TypeError: useLayersStore.$subscribe is not a function

---

PS: I thought it wasn't useful to create a new discussion since it is still related to the initial title.

[posva]

You have to use mapStores() and then in mounted or created, call this.layersStore.$subscribe()

[hipertracker]

Is there any working example?

[elijah-shady]

I need a working example too please.

[whitespacecode]

Looking for this to, i needed to trigger a scroll event to a certain $ref when a state changed in my pinia store. Accessing dynamic $refs in setup isn't straight forward. By using regular mapStores() i found a way.

import { useUserStore } from "../stores/user";
import { useCartStore } from "../stores/cart";
import { mapStores } from 'pinia';

export default {
  computed: {
    ...mapStores(useUserStore, useCartStore)
  },
 watch: {
        useCartStore: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                this.$nextTick(() => {
                    if(!newValue.activeCartItem){
                        return;                
                    }
                    this.$refs['cart-' + newValue.activeCartItem.cart_id][0].scrollIntoView({behavior: 'smooth'});
                })
            }
        }
    },
}

I also found a way to watch the value in setup() . But there i had a problem to get the $refs since they are dynamic.

[Uraharadono]

You have to use mapStores() and then in mounted or created, call this.layersStore.$subscribe()

I want to thank you from the bottom of my heart <3

[chasegiunta]

@posva Is there a way to add a watcher to Option stores?

[sockenklaus]

As @posva said:
Build your store with Composition API and you can use it like a regular component and use watch / subscriptions.

[kissu]

Working great with something like a default layout, wrapping around pages (like in Vitesse)!

[lachlanmcdonald]

For those using an Options store, a somewhat dirty workaround is to bind a $subscribe on your App component when it is mounted:

In your store, i.e. globalStore:

export const useGlobalStore = defineStore('global', {
  state: () => {
    return {
      unsubscribeHandler: null,
    };
  },
  actions: {
    subscribe() {
      this.unsubscribe();
      this.unsubscribeHandler = this.$subscribe((mutation, state) => {
        console.log(mutation, state);
      });
    },
    unsubscribe() {
      if (this.unsubscribeHandler) {
        this.unsubscribeHandler();
      }
    },
  }
});

And in your App.vue or similar do something like:

export default {
  computed: {
    ...mapStores(useGlobalStore),
  },
  onMounted() {
    this.globalStore.subscribe();   
  },
  beforeUnmount() {
    this.globalStore.unsubscribe();   
  },
}

[quantuminformation]

How do you subscribe just to one prop in the store changing? Stead of it firing for any property in the object?

ie if just the playing changes, what would my $subscribe look like

export const initialVideoPlayerState = {
  open: false,
  playing: false,
  videoPlayIndex: 0,
  videoURIs: [
    "./003-Video.mp4",
    "./001-Video.mp4",
    "./003-Video.mp4",
    "./001-Video.mp4",
    "./003-Video.mp4",
  ],
}

[kissu]

For that, you should probably have an object with the status of the video: playing or notPlaying.
A store can't do things it's not supposed to, like guessing the internal state.

[quantuminformation]

I tried this

watch(
  (e) => videoPlayerStore.playing,
  (e2) => {
    debugger

    console.log("watcher from VideoPlayer.vue THIS IS FAILING")
    const id = `{video-${videoPlayerStore.videoPlayIndex}`
    const newVideo = getVideoTemplate()
    newVideo.onloadeddata = initCenteredStyles(id)
    // noScrollVideoWrapperRef.value.appendChild(newVideo)
    console.log(e2)
  }
)

but it wouldnt fire after a call to: this action

 startPlaypack() {
      this.playing = true
      log(`startPlaypack triggered`)
    },```

[kissu]

Not sure on what is wrong here (lacking details) but you should not focus on watch at first.
For example, {video-${videoPlayerStore.videoPlayIndex} seems wrong, did you mean video-${videoPlayerStore.videoPlayIndex}?
Also, feel free to create an object (rather than an array) for videoURIs and toggle a specific video, then you can use watch to have a specific method running on it.

Also, are you sure you do need Pinia for it? Can't you watch it directly in the component?

[quantuminformation]

I didn't even know about that

[kissu]

Feel free to also delete the above comment, that way it will not pollute the discussion.

[mamitry]

Guys (@posva @sockenklaus ), sorry for my multiple edits.
I have now removed them from above and decided to put it in a separate comment field.

Regarding the setup store:

1. Are the states of the testStore available outside the Component?
   If yes, how can you access?
   I tried it with the following, but it is failing

import useTest from "./App.vue";
const test = useTest();
const { foo, bar } = storeToRefs(test);

Vue DevTools (with Pinia) doesn't list the setup store!

[HuyPham55]

[🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?

Not kinda woking with Option API I guess?

[chosh-dev]

use storeToRefs, and destructing state you want, and use watch.

import { watch } from "vue";
import { storeToRefs } from "pinia";

const { state } = storeToRefs(store);

watch(state, () => doSomeThing());

[Sjoerd82]

Ideally you'd have a watch-property in the store, similar to what you have in components, that would be so awesome:

export const useStore = defineStore('myAwesomeStore', {
    state: () => ({ ... }),
    watch: {
        someStoreVariable: { _insert awesome function here_ }
    }
})

Right now I have my watchers in some random component, which is not nice at all.

Update: Minutes after writing this it occurred to me that there is a next best thing (and it works):

export const useStore = defineStore('myAwesomeStore', {
    state: () => ({
        someStoreVariable: {"someKey":"someStuff"}
    }),
    actions: {
        watchMeGo() {
            watch(this.someStoreVariable["someKey"],
                (newVal,oldVal) => {
                    console.log('hello from watchMeGo',newVal,oldVal)
                },
                { deep: true }
            )
        },
    }
})

I also notice that I can call it more than once (which may be bad)... I'm not (yet) sure what happens if you do that, except that it doesn't throw an error...

[smerchkz]

a good offer for the "watch" section in the pinia

i coded same action watchMeGo in my pinia store for watch object, but it not working. Need i active "watchMeGo" action in my vue component or it is must working automatically? can you help? I want to save your variant and not make a watcher in a component

import {defineStore} from 'pinia'
import {watch} from "vue";

export const useResumeWork = defineStore('resume-work', {
    state: () => ({
        modal: {
            delete: {
                show: false,
                user_project_id: null
            },
            edit: {
                show: false,
                user_project_id: null
            }
        },
    }),
    actions: {
        watchEdit() {
            alert(2)
            watch(this.modal['edit'],
                (newValue, oldValue) => {
                    alert(1)
                    console.log('newValue', newValue)
                    console.log('oldValue', oldValue)
                }, {deep: true})
        }
    }
})

[Sjoerd82]

The idea is that you call watchMeGo(), or watchEdit() in this case, at least once. Like I said, I have not checked if it's bad if you call it more than once, ie. if you get a memory leak, or whatever. It's hacky, but it works fine in my app.

What I do is that I initialize the store data, and when finished I call watchMeGo() once on it, creating the watcher. You could just as easily create a watcher somewhere else (like for example @paridigm offers below), but this way you keep the logic together, and the code is not duplicated over different components that use this as a generic store (which in my case happens).

Actually, my store is a fairly complex object, and I call watchMeGo multiple times for different properties which get dynamically added, where I provide the property name as argument, something like (the difference is subtle):

    watchMeGo(someKey) {
        watch(this.someStoreVariable[someKey],
            (newVal,oldVal) => {
                console.log('hello from watchMeGo',newVal,oldVal)
            },
            { deep: true }
        )
    },

I'd love to here a pro's comment on this. All I know is that it works. #YMMV.

[nvmnghia]

@Sjoerd82 @smerchkz Can you guys explain to me why { deep } is needed for watch() inside a defineStore()? In Vue docs it is said that deep is the default (their word: "implicit").

My relevant question: #2532

[Sjoerd82]

@nvmnghia, had missed your message. For reasons I don't fully grasp (somehow the Pinia store variable is not reactive from the viewpoint of within the store maybe? -- or is this your question too?), you can only watch an object.

To watch an object (as opposed to a primitve), you must tell Vue to watch all attributes by specifying "deep". That's just the way Vue works. It seems though that your question was already answered at #2532. :-)

[iamarbabhussain]

With Options API you can use sth like this in your main.js to subscribe to state changes so you don't write in many components.

authUserStore.$subscribe((mutation, state) => console.log(state));

[paridigm]

To watch a single property using the options API,

import { defineStore } from 'pinia';
import { watch, toRef } from 'vue';

export const useStore = defineStore({
  id: 'id',
  state: () => ({
    foo: 'bar',
  }),
  getters: {},
  actions: {
    onFooChanged() {
      console.log('foo changed!');
    },
  },
});

const store = useStore();
watch(toRef(store, 'foo'), store.onFooChanged);

I agree that a watch option amongst id, state, getters, actions in the options API would be nice, but this is a way to do it manually.

UPDATE (caveat):
I found that you can't call useStore() until you've done app.use(createPinia()) on your Vue app. So, you might have to call watch() in main.js or provide a function that can be called from main.js that creates your desired watchers.

[WilliamStam]

a watch as part of the store itself (getters, actions) would be appreciated. the stores can be used in multiple places and the store itself is a single instance it seems adding a $subscribe to every place you use the store isnt a great solution vs having the watch / subscribe on the store itself.

the hacky way might be to add a component early and attach the $subscribe but what if that store is never used.

a use case for this would be if the state changes to call an action. (ie save to localstorage / do an api lookup etc.

am i missing anything obvious on why adding a watch / subscribe on the store itself isnt possible?

alternatively something like onMounted for the store could work. (hooks in the store lifecycle)

(the earlier suggestion seems to be use the setup store instead. but i haven't been able to figure out how to use that with actions / getters in a sane way, like having a store with a few states and getters and actions)

seems hacky

const accountsStore = useAccountStore()
accountsStore.$subscribe((mutation,state)=>{
    if (mutation.events.key == "account" && mutation.events.newValue && mutation.events.newValue != mutation.events.oldValue) {
        sessionStorage.setItem("account",mutation.events.newValue)
    }    
})

[stefgodin]

I found two ways to watch and init an option store without any component hack.

With a Proxy:

import {defineStore} from "pinia";
import {watch} from "vue";

const userStoreFactory = defineStore('user', {
    state: () => ({
        users: []
    }),
    methods: {
        fill(){
            this.users = [{id: 1, username: 'test'}];
        },
        push(_user){
            this.users.push(_user);
        }
    }
});

let store = null;
export const useUserStore = new Proxy(userStoreFactory, {
    apply: (target, thisArg, argumentsList) => {
        if(!store) {
            store = target.apply(thisArg, argumentsList);

            watch(() => store.users, (users) => {
                // ...
            }, {deep: true});

            store.fill();
            store.push({id: 2, username: 'test2'});
        }

        return store;
    }
});

With Object.assign:

import {defineStore} from "pinia";
import {watch} from "vue";

const userStoreFactory = defineStore('user', {
    state: () => ({
        users: []
    }),
    methods: {
        fill(){
            this.users = [{id: 1, username: 'test'}];
        },
        push(_user){
            this.users.push(_user);
        }
    }
});

let store = null;
export const useUserStore = Object.assign((..._piniaArgs) => {
    if(!store){
        store = userStoreFactory(..._piniaArgs);

        watch(() => store.users, (users) => {
            // ...
        }, {deep: true});

        store.fill();
        store.push({id: 2, username: 'test2'});
    }

    return store;
}, userStoreFactory);

The truth is that you can wrap the pinia store factory only by adding an $id property to you wrapper function (for now at least). But by using a proxy or the Object.assign, it prevents breaking in case pinia devs choose to add new props.

import {defineStore} from "pinia";
import {watch} from "vue";

const userStoreFactory = defineStore('user', {
    // ...
});

let store = null;
export const useUserStore = (..._piniaArgs) => {
    // ...
};
useUserStore.$id = userStoreFactory.$id;

I think what I did is called a pipe, which is equivalent to the decorator pattern in OOP.

[mamitry]

I used the approach with Object.assign and it worked fine for me.

I like Pinia, but the option to watch at this stage should be made more easier.

Thank you for sharing @Stefmachine

[danbars]

Very clever, @Stefmachine , thank you

[theoephraim]

@sockenklaus - I've got a plugin I just started using that helps solve this problem, although it takes it one step further and allows you to know if the store is actually being used or not. This means you could for example, trigger an API request when the store is starting to be used, watch some value in the store and trigger other api requests when it changes, and stop watching when no one is using the store anymore. For my use case I'm also toggling on/off websocket subscriptions.

Code is up here - https://stackblitz.com/edit/pinia-hooks-plugin?file=src%2Fstore.ts,src%2FApp.vue,src%2Fpinia-hooks-plugin.ts

Note that the onActivate function (a new option added to defineStore) returns a deactivate function, and you need to manually clean up after any watch calls.

If it seems stable in my own project, I'll probably open source it, but would ideally love for this kind of functionality to be built-into pinia itself...

[keesbroersen]

This is how I've got it working. I'm waiting until Pinia is initialized and after that we can subscribe to the store.
This way you can actually see what gets mutated.

const subscribeToStore = async () => {
	// Wait until Pinia is initialized
	while (!getActivePinia()) {
		await new Promise((resolve) => requestAnimationFrame(resolve))
	}

	useStore().$subscribe((mutation, state) => {
		console.log({ mutation, state })
	})
}

subscribeToStore()

[ProNotion]

Are there any official plans to implement the ability to watch from within the store?

[evilgeniuscreative]

@posva What file are you suggesting we do this in? A file under components with a .vue extension or a stores/store.js file? Or something else? I need a little more context to understand how to use this.

[whitespacecode]

@posva
I don't understand why we can't have the option to have a watcher parameter just like you have getters and actions. Right now all our stores are using the option api. We have watchers outside the store being used in components but it would be nice if we can just watch state items inside the store itself.

export const useCartStore = defineStore('cart', {
  state: () => {
    return {
      items: [],
    };
  },
  actions: {
  },
  getters: {
  },
  watchers: {
  }
});

[theoephraim]

latest version of my piniaHooksPlugin that I'm using in production.

It adds an activation hook that will be triggered when a store is used by at least one component and deactivated when it is no longer used by any components. There is also an init hook that is called only the first time it is activated. This is useful for watchers, and also for things like websocket subscriptions.

Will hopefully get it cleaned up and released on npm in the next few weeks - will post back here when I do!

/* eslint-disable @typescript-eslint/no-explicit-any */
import { PiniaPlugin, PiniaPluginContext } from "pinia";
import {
  ComponentInternalInstance,
  computed,
  getCurrentInstance,
  reactive,
} from "vue";

function isPromise(obj: any) {
  return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';
}

type MaybePromise<T> = T | Promise<T>;
declare module "pinia" {
  /* eslint-disable @typescript-eslint/no-unused-vars */
  export interface DefineStoreOptionsBase<S, Store> {
    // adds our new custom option for activation/deactivation hook
    onActivated?: (this: Store) => MaybePromise<void | (() => void)>;
    // adds our new custom option for hook that first on first use/activation only
    onInit?: (this: Store) => MaybePromise<void>;
  }
  export interface PiniaCustomStateProperties<S> {
    trackStoreUsedByComponent(component: ComponentInternalInstance): void;
  }
}

// TODO: couldnt get the typing of T happy here... but it works for consumers
export function addStoreHooks<T extends () => any>(useStoreFn: T) {
  return (...args: Parameters<T>): ReturnType<T> => {
    const store = useStoreFn.apply(null, [...args]) as ReturnType<T>;
    const component = getCurrentInstance();
    if (component) store.trackStoreUsedByComponent(component);
    return store;
  };
}

export const piniaHooksPlugin: PiniaPlugin = ({
  // pinia,
  // app,
  store,
  options: storeOptions,
}: PiniaPluginContext) => {
  /* eslint-disable no-param-reassign */

  // might not need this check, but not sure this plugin code is guaranteed to only be called once
  if (store._trackedStoreUsers) return;

  store._initHookCalled = false;

  // keep a list of all components using this store
  store._trackedStoreUsers = reactive<Record<string, boolean>>({});
  store._trackedStoreUsersCount = computed(
    () => Object.keys(store._trackedStoreUsers).length,
  );
  // expose this info to devtools
  // TODO: determine the best way to safely check in both vite and webpack setups
  if (import.meta.env.DEV /* || process.env.NODE_ENV === "development" */) {
    store._customProperties.add("_trackedStoreUsers");
    store._customProperties.add("_trackedStoreUsersCount");
  }

  function trackStoreUse(
    component: ComponentInternalInstance,
    trackedComponentId: string,
  ) {
    // bail if already tracked - which can happen when stores are using each other in getters
    if (store._trackedStoreUsers[trackedComponentId]) return;

    store._trackedStoreUsers[trackedComponentId] = true;

    if (!store._initHookCalled && storeOptions.onInit) {
      // TODO: what to do if this errors?
      // eslint-disable-next-line @typescript-eslint/no-floating-promises
      storeOptions.onInit.call(store);
    }

    if (store._trackedStoreUsersCount === 1 && storeOptions.onActivated) {
      // console.log(`${store.$id} - ACTIVATE`);
      // activation fn can return a deactivate / cleanup fn
      store._onDeactivated = storeOptions.onActivated.call(store);

      // activate could be async, so need to resolve if so...
      // TODO may need to think more about this - what if activate errors out?
      if (isPromise(store._onDeactivated)) {
        // eslint-disable-next-line @typescript-eslint/no-floating-promises
        store._onDeactivated.then((resolvedOnDeactivate: () => void) => {
          store._onDeactivated = resolvedOnDeactivate;
        });
      }
    }

    // attach the the unmounted hook here so it only ever gets added once
    // (because we bailed above if this component was already tracked)
    const componentAny = component as any;
    // onBeforeUnmount(() => { store.unmarkStoreUsedByComponent(); });
    componentAny.bum = componentAny.bum || [];
    componentAny.bum.push(() => {
      // console.log(`[${store.$id}] -- ${trackedComponentId} un-used`);
      if (!store._trackedStoreUsers[trackedComponentId]) {
        throw new Error(
          `[${store.$id}] Expected to find component ${trackedComponentId} in list of users`,
        );
      }
      delete store._trackedStoreUsers[trackedComponentId];
      if (
        store._trackedStoreUsersCount === 0 &&
        store._onDeactivated &&
        typeof store._onDeactivated === 'function'
      ) {
        // console.log(`${store.$id} - DEACTIVATE`);
        store._onDeactivated.call(store);
      }
    });
  }

  store.trackStoreUsedByComponent = (component: ComponentInternalInstance) => {
    // console.log(
    //   `[${store.$id}] track use by ${component.type.__name} -- mounted? ${component.isMounted}`,
    //   component,
    // );

    // calling lifecycle hooks here (ie beforeMount) causes problems for useStore calls within other store getters/actions
    // so we're injecting the hooks directly into the vue component instance
    // this is probably inadvisable... but seems to work and I don't believe this will change any time soon

    // as an added bonus, this means `watch` calls in our onActivated hook are not bound to the first component that used this store
    // so they will not be destroyed on unmount. This requires us to clean up after ourselves, but it is the desired behaviour.

    // onBeforeMount(() => { store.markStoreUsedByComponent(); });
    const componentIdForUseTracking = `${component.type.__name}/${component.uid}`;
    const componentAny = component as any;

    // console.log(
    //   `tracking ${componentIdForUseTracking}`,
    //   JSON.stringify(store._trackedStoreUsers),
    // );
    if (component.isMounted) {
      trackStoreUse(component, componentIdForUseTracking);
    } else {
      // note - this can happen multiple times, but we handle this case in `trackStoreUse()`
      componentAny.m = componentAny.m || [];
      componentAny.m.push(() => {
        trackStoreUse(component, componentIdForUseTracking);
      });
    }
  };
};

Use it like this:

// load the plugin itself
const pinia = createPinia();
pinia.use(piniaApiToolkitPlugin);

// and then also wrap the defineStore call
export const useCounterStore = addStoreHooks(
  defineStore("counter", {
    state: () => ({
      counter: 20,
    }),
    getters: {
      counterX2: (state) => state.counter * 2,
    },
    actions: {
      increment() {
        this.counter++;
      },
      decrement() {
        this.counter--;
      },
      reset() {
        this.counter = 0;
      },
    },

    // called each time the store is activated
    // use to watch stuff, activate websocket subscriptions, etc
    onActivated() {
      console.log("counter store activated");
      const cleanupAlertWatch = watch(
        () => this.counter,
        () => {
          if (this.counter === 5) alert("counter = 5!");
        },
      );

      // can return a deactivate function, use to cleanup (unwatch, unsubscribe, etc)
      return () => {
        console.log("counter store deactivated");
        cleanupAlertWatch();
      };
    },
    onInit() {
      // called only the first time the store is activated
    }
  }),
);