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

1 Answer 1

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.