My goal is to update the Vuex state by replacing one object in the state.todos array with another object provided by my component or mutations.
This is how my Vuex state looks like:
`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
}
]
Here is the mutation from Vuex that facilitates the change:
finalSaving(state, index, obj) {
state.todos.splice(index, 1, obj);
}
The component setup looks like this:
<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 },
};
},
One specific method in the component causing trouble is:
methods: {
...mapMutations(["finalSaving"]),
finalSave() {
this.finalSaving(this.routeId, this.editObj);
},
},
During mount process, I make sure to clone the relevant object for editing:
mounted() {
this.editObj = deepClone(this.todos[this.routeId]);
},
computed: {
...mapState(["todos"]),
},
An example of a working mutation in Vuex is as follows:
agree(state, index) {
state.todos.splice(index, 1);
},
This Vue component method executes the above mutation properly:
yes(index) {
this.agree(index);
}