Блог

Здесь я работаю в vue, в частности, в vuex, хотя, скорее всего, это проблема с ванильным js. У меня есть настройка корзины, которая перемещает список товаров в корзину покупок при нажатии кнопки, но я не могу заставить работать удаление из корзины. Вот мой подход;

Дочерний элемент, вызывающий действие с кнопки;

 <b-button @click="removeItem" variant="primary">Remove from Cart</b-button>

data() {
    return {
        singleCart: this.items,
    };
},
methods: {
    removeItem() {
        this.$store.dispatch("DELETE_CART_ITEM", this.singleCart.item_id);
    },
},
  

И логика в моем хранилище vuex;

 const actions = {
    ADD_TO_CART: (context, payload) => {
        context.commit('MUTATE_CART', payload)
    },
    DELETE_CART_ITEM: (context, payload) => {
        context.commit('DELETE_FROM_CART', payload)
    }
}

const mutations = {
    MUTATE_CART: (state, item) => {
        state.cart.push(item)
    },
    DELETE_FROM_CART: (state, payload) => {
        //filter the array for the item id, then splice it?

        console.log(payload)

        var index = state.cart.findIndex(item => item.item_id === payload)

        console.log(index)

        console.log(typeof index)

        state.cart.splice(index, 1)
    }
}
  

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

Например, если у меня в корзине 3 товара, и я хочу удалить второй, он находит правильный индекс, в таком случае 1, регистрирует его, чтобы быть уверенным, затем по какой-либо причине сращивание удаляет последний элемент в списке. Почему? И что мне сделать, чтобы это исправить?

РЕШЕНИЕ: Оказывается, я просто запутался в том, как я должен вызывать свои данные getter в конце концов, решение было в родительском компоненте, который перебирает элементы корзины покупок и использует вычисляемое свойство, чтобы получить его как таковое;

 <div v-for="item in cart" :key="item.id">
<cartProduct :items="item" />
</div>

computed: {
    cart() {
        return this.$store.getters.GET_CART 
    }
},
  

И, таким образом, был реактивным.

Это странное предостережение Vue. Ниже приведен пример того, что не будет работать в этом случае.

 DELETE_FROM_CART: (state, payload) => {
        var index = state.cart.findIndex(item => item.item_id === payload);
        var dummy = state.cart.slice();
        dummy.splice(index, 1);
        state.cart = dummy;
    }