Vue : Why doesn't this `this` work normally?

Question

case 1

data(){
  return {
    serverNames : ['local']
  }
}
computed: {
    ...mapState('store', {
      local_server_name: (state) => {
        this.serverNames[0] = state.local_server_name // Cannot read property 'serverNames' of undefined
        return state.local_server_name
      },
    }),
  },

case 2

computed: {
        ...mapState('store', {
          local_server_name: (state) => {
            serverNames[0] = state.local_server_name // serverNames is not defined
            return state.local_server_name
          },
        }),
      },

In fact, appending this or not, it doesn't work. If I want to use arrow function, then how to get that serverNames array?

If you want to use arrow function, you need to curb this feeling because it's incorrect to use it here. Regular and arrow functions aren't interchangeable — Estus Flask, Dec 16 '21 at 09:09

score 0 · Accepted Answer · answered Dec 16 '21 at 06:02

The arrow function will preserve this based on the scope it was defined within, which is inside the object passed as a parameter to mapState where this refers to the global object (window).

But that's besides the point because you shouldn't be mutating state within a computed property; this can lead to infinite re-renders and/or Vue will complain.

If you want to update component state from Vuex state then you should do so within a watcher. Maybe something like this:

data() {
  return {
    serverNames: ['local']
  }
},

computed: {
  ...mapState('store', [
    'local_server_name'
  ])
},

watch: {
  local_server_name(value) {
    this.serverNames[0] = value
  }
}

Vue : Why doesn't this `this` work normally?

1 Answers1