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