Vuex 商店不更新 state

Question

My app has a small feature that if a user click on a particular image, it should get removed by a list and moved into another in the Vuex store.

It is something really simple:

// Action
  async movePicture({ commit }, data) {
    try {
      const comment = await this.$axios.$post('/photo-check', data)
      commit('MOVE_PHOTO', photoId)
    } catch (error) {
      throw error.response
    }
  },

  // Mutation
  MOVE_PHOTO: (state, id) => {
    const i = _.findIndex(state.list, p => p.id === id)
    if (i > -1) {
      const photo = state.list[i]
      state.list.splice(i, 1)
      state.visited.push(photo)
    }
  },

The point is that unfortunately this picture wont splice from the list and I do not understand why... Maybe I should use something specific to update arrays in Vuex and I don't know it... also I can not find any different solution than this...

Answer 1

JavaScript isn't good at handling these sitautions.

You should use

this.$delete(state.list, index)

Vue.delete does the magic bit for you.