Splice 方法而不是将对象替换为另一个（给定的）对象 - 只需将其替换为未定义的 Vue.js Vuex

Question

我试图通过拼接 state.todos 数组来更改 Vuex 状态，将数组中的一个对象更改为我的组件中给出的另一个对象/通过突变

这是我的 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);
}

Answer 1

mapMutation 方法只接受一个参数。您可以使用具有多个属性的对象作为参数，然后 de-structure 它在 Vuex 存储中。

改变这个

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

到

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

然后在Vuex文件中

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

Splice 方法而不是将对象替换为另一个（给定的）对象 - 只需将其替换为未定义的 Vue.js Vuex

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

javascript

mutation

vue.js

vuex