Vuex $state evaluates correctly from debugger but throws when executed

Question

I'm stumped. I made a quick video showing the debugger evaluates the expression correctly, but when it's stepped over, it throws.

It's from a getter in a vue component accessing this.$store.state.Obj.value

https://youtu.be/IRQB1ZWNoGk

Any suggestions on why would it evaluate correctly in the debugger console but throw when stepped over?

computed: {
  mode: {
    get: () => this.state.$store.getters.mode,

The this evaluates to my component in the debugger, but throws when it is stepped over it.

FYI. I was trying to follow this pattern for making v-model work https://vuex.vuejs.org/guide/forms.html#two-way-computed-property

Answer 1

Try to use arrow function to catch error like this:

.catch (e => {
   //Then you can access 'this' here
})

Answer 2

I think the disconnect between what the chrome debugger was showing me for the local scope context was confused because it was compiled with babel. The compiler was trying to show me the original source but the actually running javascript was different.

This is what ended up being the solution. It shows both ways that worked. First, passing in the state. Second, is using a different notation.

computed: {
  ...mapState(['MainMode']),
  mode: {
    get: state => state.MainMode.mode,
    set(val) { this.$store.dispatch('updateMode', val); },
  },

The key here this fails

   set: val => this.$store.dispatch('updateMode', val),

while this works

   set(val) { this.$store.dispatch('updateMode', val); },