Tricky problem with mutations arrays in Vuex, how to solve?

Question

I have a little async actions, that take data (array of objects) from server and commit mutation with this data. Then, in my mutation I pushing data to store. My first attempt was ES6-ish:

state.data = [...state.data, ...payload];

Troubleshooting state with console I saw that new state is have 205 elements, how it should be. But, if I checking state directly from Vuex devtools - length 0.

Ok, maybe problem with destructuring or whatever.

state.data = payload;

Doesnt work too. So, my third attempt was a dumbest ever:

payload.forEach(x => x.state.data.push(x));

And... it worked. But, it took time, like a lot (only 205 elements, Carl!) So, my question -> whats wrong with Vue/Vuex?

Answer 1

You can use the Vue.set() function.

In your mutation method do something like:

Vue.set(state, 'data', payload);

Documentation