galvez/vue-stator

Use state property in action of another module

rico opened this issue · 2 comments

rico commented

I would like to use a state property of one module in an action of another module. The method in the module looks like this:

 async loadByNumber({ state }, numbers) {

    const schedule = this.$state.schedules.schedule

    const response = await axios.post('/api/rooms', {
        'schedule': schedule,
        'numbers': numbers
})

But, as you can see in the screenshot below, the value of schedule is just an empty Observer. The state value, however, seems to be there. I just can't get it.

image

Sorry if this is a dumb question, JS is not really my area of expertise ...

Hmm, not sure actually. It looks like it should be working unless schedule is just not yet set at the exact moment you call loadByNumber.
Also sometimes using the console can be confusing as when you console.log an object its passed by reference (not value) so the content of the object can be changed since the log call once you view the log record. To circumvent this caveat try to wrap the object in JSON.parse(JSON.stringify(object)) to make sure you are logging the object state at the exact moment of logging

rico commented

To circumvent this caveat try to wrap the object in JSON.parse(JSON.stringify(object)) to make sure you are logging the object state at the exact moment of logging

@pimlie thank you very much for the quick reply and for the tip - schedule was indeed not set at the moment I needed it and your tip revealed that.

Closing this, but if you don't mind me asking - how do experts debug this? Also in the console using the JSON.stringify approach?