Как удалить элемент с помощью vuex? - PullRequest
Новая
       15

Как удалить элемент с помощью vuex?

0 голосов
/ 01 декабря 2018

Я только начал изучать 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>

Я могу добавить машину и получить машины.Но не могу удалить

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

Вы хотите совершить мутацию для удаления машины

Вот ваш метод 

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)
}
0 голосов
/ 01 декабря 2018

Я вижу, что вы используете Axios с Vue, поэтому ваш запрос .delete требует удалить уже, но в .then вы должны сделать что-то, не связанное с удалением или соединением, 

     deleteCar (cars) {
        this.$http
          .delete('http://localhost:3000/cars/' + cars.id', { data: payload })
          .then(
            //here write what you want after delete
            res => console.log(res);
          )
      }

в.then вы делаете то, что вам нужно после удаления, потому что .delete запрос уже удалил эту часть из ваших данных JSON

...