Vuex-module-decorators: How to watch/react to store changes in vue components?

[blackmad]

Hi,

I'm using vuex-module-decorators for some basic user state management.

I have been trying to figure out how to get a vue component to react to the user profile being loaded in my store and the best approach I've come up with so far is to explicitly watch variables in my store like so:

created() {
      this.$store.watch(
          (state, getters) => state.user.userProfile,
          () => {
            this.profile = UserModule.userProfile;
          }
        );
}

But this seems like a bad idea because it's not typesafe and isn't magic. It seems to me like I should be able to have some magic where just referencing UserModule.userProfile makes it work. What am I missing?

The stores are pretty simple, the full code is here: https://gist.github.com/blackmad/5b6c9641331abb8ac5fb4a679812ca9f

[PatrykWalach]

import UserModule from '.../user.ts'

• Assuming you use vue-class-component and vue-property decorators:

...

  get userProfile() {
    return UserModule.userProfile
  }

  @Watch('userProfile')
  changeProfile(profile: UserProfile) {
    this.profile = profile
  }

• if you don't:

...
  computed: {
    userProfile() {
      return UserModule.userProfile
    }
  },
  watch: {
    userProfile(profile: UserProfile) {
      this.profile = profile
    }
  }

If u don't want to assign type:

  @Watch('userProfile')
  changeProfile() {
    this.profile = UserModule.userProfile
  }

or

  watch: {
    userProfile() {
      this.profile = UserModule.userProfile
    }
  }

[blackmad]

I guess I'm still surprised I need explicit watches in all these cases - can you explain why?

[danielroe]

Perhaps you could explain your use case? @PatrykWalach's explanation seems like the right way of watching the store (which is what you asked). However, depending on your situation, you might not need to watch the store and might be able to depend on Vue's reactivity. For example, if you just create a computed property (class syntax):

get isLoaded() {
  return !!UserModule.userProfile
}

[anilrai01]

I also tried to watch for the changes in the Vue store but turns out we don't need to watch for store change explicitly. You can rely on Vue's reactivity. You can directly bind the store values through getters using v-model and leave the rest to Veu