Метод Splice вместо замены объекта другим (заданным) - просто заменив его на undefined Vue.js Vuex

Я пытаюсь изменить состояние Vuex, объединяя массив state.todos, меняя один объект в массиве другим, который задан в моем компоненте / через мутации

это мое состояние Vuex

`state: {
         todos: [
          {
            title: "First Title",
            desc: [
              {
                name: "First description",
                completed: false,
                editing: false
              }
            ],
            id: 0,
            completed: false,
            show: false
          },
      {
        title: "Second Title",
        desc: [
          {
            name: "Second description",
            completed: false,
            editing: false
          },
          {
            name: "Third Description ",
            editing: false,
            completed: false
          }
        ],
        id: 1,
        completed: false,
        show: false
      }
    ]

это мутация из Vuex

finalSaving(state, index, obj) {
  state.todos.splice(index, 1, obj);
}

Составная часть:

 <script>
import { mapState, mapMutations } from "vuex";
import deepClone from "clone-deep-js";
export default {
  data() {
    return {
      routeId: this.$route.params.id,
      editObj: { title: "", desc: [], id: null }, 
    };
  },

Проблемный метод:

methods: {
 ...mapMutations(["finalSaving"]),
   finalSave() {
     this.finalSaving(this.routeId, this.editObj);
   },
 },

так далее

 mounted() {
    this.editObj = deepClone(this.todos[this.routeId]);
  },
 computed: {
...mapState(["todos"]),
},

Эта мутация отлично работает: (Vuex)

 agree(state, index) {
  state.todos.splice(index, 1);
},

Метод компонента Vue:

yes(index) {
  this.agree(index);
}

person Александр Ястребов    schedule 09.08.2020    source источник


Ответы (1)


mapMutation методы принимают только один аргумент. Вы можете использовать объект с несколькими свойствами в качестве аргумента, а затем деструктурировать его в хранилище Vuex.

Измените это

methods: {
 ...mapMutations(["finalSaving"]),
   finalSave() {
     this.finalSaving(this.routeId, this.editObj);
   },
 },

TO

methods: {
 ...mapMutations(["finalSaving"]),
   finalSave() {
     this.finalSaving({routeId: this.routeId, objectToBeEdited: this.editObj});
   },
 },

Затем в файле Vuex

finalSaving(state, payload) {
  state.todos.splice(payload.routeId, 1, payload.objectToBeEdited);
}

person Tony    schedule 10.08.2020