Is there an equivalent to this.$store.watch or this.$store.subscribe?

[terrymun]

I am wondering if is possible to watch store properties, or subscribe to actions/mutations, inside a VueJS component, when using vuex-module-decorators?

Of course, I can always do this, assuming that someStore is assigned with getModule(<storeClassName>). The code below is an example code from inside a VueJS component using vue-property-decorator:

// Setup internal property
private get someStoreGetter() {
  return someStore.property;
}

// Watch changes to internal property
@Watch
private onSomeStoreGetterChange() {
  console.log(someStore.property);
}

However, I find this rather cumbersome and kind of a code smell, because it creates an unnecessary property on the VueJS component for the sole purpose of watching changes to it.

[litao10422]

I'd also like to know the best solution to this question.

[darylteo]

I have done this

PublishingListStore.ts

import {Action, getModule, Module, Mutation, MutationAction, VuexModule} from "vuex-module-decorators";

import {store} from "src/store";

@Module({
    dynamic: true,
    store: store,
    stateFactory: true,
    name: 'publishing',
    namespaced: true,
})
export default class PublishingListStore extends VuexModule {
       public tab: number = 0;
       ...
}

store.watch((_) => getModule(PublishingListStore, store).tab, (value: number, oldValue: number) => {
    console.log("tab changed", value, oldValue);
});

store.watch((state: any) => state.publishing.tab, (value: number, oldValue: number) => {
    console.log("tab changed", value, oldValue);
});

Both should be equivalent... but I'm not 100% sure on whether this requires the store to be registered to the store, but getModule should cause the store to dynamically register itself.

The only way to do this on dynamic registration is to modify getModule itself to do it after calling registerModule perhaps. michaelolof/vuex-class-component#27 has a interesting API proposal that will do just that using statics.