Splice method instead of replacing the Object with another (given) one - just replacing it with undefined Vue.js Vuex

Question

I'm trying to change the Vuex state by splicing the state.todos array, changing the one Object in array with another One that is given in my component / through the mutations

this is my Vuex state

`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
      }
    ]

this is mutation from Vuex

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

Component:

 <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 }, 
    };
  },

The problematic method:

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

etc

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

This mutation works just fine: (Vuex)

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

Vue component method:

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

Answer 1

mapMutation methods accept only one argument. You can use an object with multiple properties as an argument and then de-structure it in the Vuex store.

Change this

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

TO

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

Then in the Vuex file

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