Блог

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

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

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

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

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

Компонент:

  <script&&t;
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(["finalSavin&"]),
   finalSave() {
     this.finalSavin&(this.routeId, this.editObj);
   },
 },
  

и т. Д

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

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

  a&ree(state, index) {
  state.todos.splice(index, 1);
},
  

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

 yes(index) {
  this.a&ree(index);
}
  

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

Измените это

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

Для

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

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

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