Replace array item in Vuex Nuxt

Question

I need to replace some array items by index in vuex nuxtjs:

changeTicket(state, value) {
    // 1 - Vue.set(state.tickets, value.index, value.numbers)
    // 2 - state.tickets[value.index] = value.numbers
}

Im trying 2 variants, in first i have an error = [vuex] do not mutate vuex store state outside mutation handlers., in second im lost reactivity.

In component, im sending new array after click:

setNumber(num) {
  const vResult = this.numbers;

  if(vResult.includes(num)) {
    vResult.splice(vResult.indexOf(num), 1)
  } else {
    if(vResult.length >= this.options[this.game].max) return;
    vResult.push(num)
  }

  this.$nextTick(() => {
    this.$store.commit("games/changeTicket", {
      numbers: vResult,
      index: this.index
    })
  })
},

Arrays example:

[
  [1,2,3,4,5],
  [2,5,61,21],
  ...
]

score 0 · Accepted Answer · answered Mar 28 '22 at 19:58

0

I guess changeTicket really is a Vuex mutation, right? Otherwise, that's why you get the Vuex warning.

In the mutation, just use splice in your array:

changeTicket(state, { index, numbers }) {
  state.tickets.splice(index, 1, numbers)
}

answered Mar 28 '22 at 19:58

Kapcash

4,123
2
13
32

Xye im trying this, but same error.. – Eugeny Venegrad Mar 29 '22 at 04:49
only JSON.stringity and JSON.parse helps, aswrap in vResult = this.numbers; – Eugeny Venegrad Mar 29 '22 at 04:50
@EugenyVenegrad What does `this.numbers` refer to? The vuex state? – Kapcash Mar 29 '22 at 07:08

Replace array item in Vuex Nuxt

1 Answers1