[Vuejs]-Vue : Why doesn't this `this` work normally?

by

0👍

✅

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
  }
}

Leave a comment