如何使用 vuex 删除项目？

Question

我刚开始学习vuex，无法删除项目。我可以直接在组件中删除项目。

 deleteCar (cars, id) {
        this.$http.delete('http://localhost:3000/cars/' + cars.id)
          .then(() => {
              this.cars.splice(id, 1)
          })
      }

在 vuex 我有：

 state: {
    car: {},
    cars: []
  },
  mutations: {
    ADD_CAR (state, car) {
      state.car = car
    },
    GET_CARS (state, cars) {
      state.cars = cars
    }

  },
  actions: {
    createCar({commit}, car) {
      axios.post('http://localhost:3000/cars', car)
        .then(() => {
          commit('ADD_CAR', car)
        })
    },

    loadCars({commit}) {
      axios.get('http://localhost:3000/cars')
        .then(res => {
            const cars = res.data
            commit('GET_CARS', cars)
        })
    }
  }

我想删除项目的组件中的代码：

 <div class="card mb-3" v-for="(car, i) in cars" :key="i">
      <div class="card-header">
      Cars name: {{ car.carName }}
      </div>
      <div class="card-body">
        <h5 class="card-title">Country: {{ car.country }}</h5>
        <p class="card-text">Year of manufacture: {{ car.carYear }}</p>
        <button class="btn btn-primary mb-5" @click="deleteCar(car, i)">Delete Car</button>
      </div>
    </div>

我可以添加汽车并获得汽车。但是删不掉

原文由 Николай Гаврилов 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你想提交一个突变来删除汽车

这是你的方法

deleteCar (cars, id) {
    this.$http.delete('http://localhost:3000/cars/' + cars.id)
        .then(() => {
              this.cars.splice(id, 1);
        });
}

而不是 deleteCar(cars, id) 您需要将其更改为 deleteCars({commit}, id)

所以你的行动是

deleteCar ({commit}, id) {
    this.$http.delete('http://localhost:3000/cars/' + id)
        .then(() => {
             commit('DELETE_CAR', id);
        });
}

你有一个突变 DELETE_CAR

 DELETE_CAR(state, id){
    index = state.cars.findIndex(car => car.id == id);
    state.cars.splice(index, 1);
}

原文由 TJ Weems 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为清楚起见，一个简化的答案。

在模板中：

 <button @click="deleteCar(car)">Delete Car</button>

组件中的方法：

  deleteCar(car) {
    this.$store.commit('DELETE_CAR', car);
 }

商店中的突变：

  DELETE_CAR(state, car) {
    var index = state.cars.findIndex(c => c.id == car.id);
    state.cars.splice(index, 1);
 }

原文由 Andrew 发布，翻译遵循 CC BY-SA 4.0 许可协议