The following mutation does not work:

const mutations = {
  [types.UPDATE_IMG_URLS] (state, newArray) {
    state.imageUrlArray.concat(newArray)
  },
(...)
}

However this one does:

const mutations = {
  [types.UPDATE_IMG_URLS] (state, newArray) {
    state.imageUrlArray = state.imageUrlArray.concat(newArray)
  },
(...)
}

I thought arrays and objects were passed by reference in Javascript. Does Vuex meddle with this behavior?

The following mutation does not work:

const mutations = {
  [types.UPDATE_IMG_URLS] (state, newArray) {
    state.imageUrlArray.concat(newArray)
  },
(...)
}

However this one does:

const mutations = {
  [types.UPDATE_IMG_URLS] (state, newArray) {
    state.imageUrlArray = state.imageUrlArray.concat(newArray)
  },
(...)
}

I thought arrays and objects were passed by reference in Javascript. Does Vuex meddle with this behavior?

• javascript
• vue.js
• vuex

Share Improve this question Follow edited Jan 26, 2017 at 19:27 softcode asked Jan 26, 2017 at 19:21 softcodesoftcode 4,6881212 gold badges4444 silver badges6969 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The concat method does not change the existing array, but returns a new array. That's why you need to actively overwrite state.imageUrlArray with the freshly returned array.

If, for some reason, you want to make the mutation in place, you should be able to to this: state.imageUrlArray(state.imageUrlArray, newArray)

See https://developer.mozilla/en/docs/Web/JavaScript/Reference/Global_Objects/Array/concat for more details.