无法从数组 Vuex

问题描述

尝试了我在此处找到的所有方法（包括 this.$delete）后，我无法从数组中删除项目。

findindex 和 IndexOf 返回 -1，因此显然不起作用。 filter 或 splice 也不起作用。

我怀疑我做错了什么。 我将不胜感激

Vuex

  namespaced: true,state: {
    coefficients: [],},mutations: {
    getDataState(state,coefficients) {
      state.coefficients = coefficients;
    },itemDelete(state,item) {
      const index = state.coefficients.findindex((el) => el.id === item.id);
      if (index > -1) state.coefficients.splice(index,1);
      // #2 state.coefficients.splice(index,1);
      // #3 
      /* const index = state.coefficients.indexOf(item);
      console.log(index,'index');
      if (index > -1) {
        state.coefficients.splice(index,1);
      } */
    },actions: {
      getData({ commit },userData) {
      api.get('/coefficients/')
        .then((res) => {
          commit('getDataState',{
            coefficients: res,});
        })
        .catch((error) => {
          console.log(error,'error');
          commit('error');
        });
    },deleteData({ commit },{ id,item }) {
      api.delete(`/coefficients/${id}`)
        .then((res) => {
          commit('itemDelete',{
            item,});
          console.log(res,'res');
        })
        .catch((error) => {
          console.log(error,'error');
        });
    },}; 

组件

        <div v-for="(item,index) in this.rate.coefficients" :key="item.id">
          <div>{{ item.model }}</div>
          <div>{{ item.collection }}</div>
          <div>{{ item.title }}</div>
          <span v-on:click="deleteItem(item.id,item)">X</span>
         </div>
         
        /* ... */

         methods: {
          deleteItem(id,item) {
            this.$store.dispatch('rate/deleteData',item });
            },created() {
          this.$store.dispatch('rate/getData');
        },

解决方法

您的 itemDelete 突变需要一个具有 id 属性的对象，但是您将一个具有 item 属性的对象传递给它，因为您将 item 包装在一个普通的传递对象时。

更改 deleteData 中的提交以传递项目而不先包装它：

commit('itemDelete',item);