Vuex прямая Мутация props

Как я понимаю, при мутации Vuex происходит копирование всегда по значению, но когда сделал мутацию напрямую пропса, как потом выяснилось, копирование произошло по ссылке.

  props: {
    images: {
     type: Array
    },
  },

  this.$store.commit('NewFileManager/setDataCurrentFiles', {key: this.id, value: this.images})
      this.$store.commit('NewFileManager/setDataSelectedFiles', {key: this.id, value: this.images})

Мутация записи:
 setDataSelectedFiles(state, data){
        Vue.set(state.selected_images, data.key, data.value)
    },
setDataCurrentFiles(state, data){
    Vue.set(state.current_images, data.key, data.value)
},
    
Затем, удаляю из одного состояния элемент: 
this.$store.commit('NewFileManager/removeItemSelectedFiles', {key: this.id, index: 0})

Мутация удаления:
   removeItemSelectedFiles(state, data){
      state.selected_images[data.key].splice(data.index, 1);
    },

В итоге, удаляются элементы из обоих состояний, что свидетельствует о том, что копирование пропса произошло по ссылке.

Затем, я пробовал записать пропс в локальную переменную:

  props: {
    images: {
     type: Array
    },
  },
  data() {
    return{
      imagesLocal: this.images.slice()
    }
  },

    this.$store.commit('NewFileManager/setDataCurrentFiles', {key: this.id, value: this.imagesLocal})
    this.$store.commit('NewFileManager/setDataSelectedFiles', {key: this.id, value: this.imagesLocal})
    this.$store.commit('NewFileManager/removeItemSelectedFiles', {key: this.id, index: 0})

Результат тот же.

Потом, решил копировать по значению прям в коммите, и это сработало, одно состояние никак не влияет на другое:

  props: {
    images: {
     type: Array
    },
  },
      this.$store.commit('NewFileManager/setDataCurrentFiles', {key: this.id, value: this.images.slice()})
      this.$store.commit('NewFileManager/setDataSelectedFiles', {key: this.id, value: this.images.slice()})      
      this.$store.commit('NewFileManager/removeItemSelectedFiles', {key: this.id, index: 0})

Проблема копирования по ссылке только с пропсами у vuex? Или есть ещё что-то о чем необходимо знать? Использование splice для удаления элементов из состояния - плохая практика?


Ответы (1 шт):

Автор решения: watscho

Мутировать состояние это неправильно. Всегда нужно перезаписывать новым объектом.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

→ Ссылка