[Question] Module Watching other module value, and initial state setting

[ronnyek]

Apologies for asking questions here.. and hoping for just pointers to point me in the right direction. If there is a better place to ask this, I'm more than happy to do that.

1) Just guidelines around loading initial state. Most of the default state assignments work, but one needs to come from a service. Would I just create an action and somehow trigger that on start someplace to load a value from a service, and then set a state property on my store?

2) I've got a module that handles behavior for a drop down context selector. This module is not aware of other modules. I've got a second module that basically wants to update parts of ITS state based on value set in the dropdown selector.

Pseudo code looks like this Module1 -> SelectedContext

then

Module2 -> (when selected context changes) -> load data from a service, and set state value

I've tried lots of things for this one, and the thing that seems the closest to working, but doesnt actually work was

Create a watcher in the constructor of module2 that watches values for the SelectedContext. Then when it changes, fetch data and set value. I can see it executing every part of the code like I'd expect, but I don't see the UI reflecting the value that gets set when the context changes.

[bodograumann]

Have you defined an initial value for the state you want to update? If you haven't it would not be reactive.

[ronnyek]

Yeah... I mean I can call the action from a ui event and it does exactly what is expected. I guess the correct question, is how do I trigger an event that can update state on module2 based on a change of state in module1. I suspect my problem is I'm currently trying to do this:

// module2
constructor (options: RegisterOptions) {
    super(options)
    module1.$watch(x => x.context, (newValue, oldValue) => {
      if (newValue?.id !== oldValue?.id) {
        console.log('Context Changed', newValue)
        this.someActionThatUpdatesModule2State()
      }
    })
  }

And I could totally see why doing things this way is wrong, I just don't understand how best to achieve this with vuex and vuex-class-modules (btw, this actually does fire all the internal events, and someAction runs but when it sets other state variables on module2, the UI doesn't get updated)

[bodograumann]

I actually would expect the solution to work like that. Not sure why it doesn’t. Would you maybe be able to a minimal example project demonstrating the problem?

[gertqin]

I dont think calling actions from the constructor will work, because inside the constructor the actions are not proxied to the underlying vuex module. So you should define the watcher outside the constructor.

[pancake-boy]

is it possible to access 'this' of the module within the watch callback?