Я использую API бесплатного кофе это для получения данных.
Каждый элемент кофейного напитка заполняется компонентом Vue Card. Компонент карты имеет counter: 0
, который пользователь может increment()
и decrement()
.
Card.vue
import {store} from '../store'
import {ref} from 'vue'
export default {
data() {
return {
store,
count: ref(0)
}
},
props: ['drink'],
methods: {
decrement(){
(this.count != 0) ? this.count-- : this.count = 0
store.decrement(this.drink.title,this.drink.id,this.count)
},
increment(){
this.count++
store.increment(this.drink.title,this.drink.id,this.count)
}
},
}
Я использую API реактивности для управления состоянием.
Store.js(управление состоянием)
import { reactive, ref } from 'vue'
export const store = reactive({
drinks : ref([]),
increment(drinkName,id,count) {
let drink = this.drinks.find(drink => drink.drinkID === id);
if (drink) {
drink.drinkCount = count
} else {
this.drinks.push({
drinkID : id,
drinkName : drinkName,
drinkCount : count,
})
}
},
decrement(drinkName,id,count) {
let drink = this.drinks.find(drink => drink.drinkID === id);
if (drink) {
drink.drinkCount = count
if (drink.drinkCount == 0) this.drinks.splice(this.drinks.indexOf(drink),1);
}
},
remove(id) {
let drink = this.drinks.find(drink => drink.drinkID === id);
if (drink) {
drink.drinkCount = 0
if (drink.drinkCount == 0) this.drinks.splice(this.drinks.indexOf(drink),1);
}
}
})
Наконец, у меня есть компонент Sidebar (корзина), который использует API Reactivity для реактивного добавления кофейных напитков в корзину на основе компонента Changes on the Card.
Я реализовал кнопку удаления для боковой панели, чтобы функция remove()
обнуляла счетчик и удаляла товар из корзины. Вы можете увидеть код в разделе Store.js. Проблема, с которой я сталкиваюсь, заключается в том, что все обновляется в корзине, и товар удаляется, как и ожидалось, но ничего не происходит в Card Component
. counter
в компоненте карты не обновляется.
примечание: Card Component
и Sidebar Compnent
не имеют родительских и дочерних отношений.
Вот ссылка на кодыпесочница
спасибо за предложение, вот ссылка на песочницу: codeandbox.io/s/tender-bartik-rjxsx3
у каждого кофе должно быть свое count
поле. но у вас есть count
для каждого Card Component
. также вы переназначаете состояние компонентов HotView
и IcedView
с получением данных в хуке mounted()
У меня все работает здесь
Это было бы проще отладить и помочь, если бы вы попытались сделать коды воспроизведения и ящик :/