В общем в чём суть. Есть у меня страница продуктов в компоненте Products.vue и есть App.vue где находится хедер и футор. И в футоре у меня как раз находится иконка корзины и рядом с ней указано количество товаров в корзине. На странице продуктов при нажатии в продукте "Добавить в корзину" у меня записываются данные в localStorage, но проблема в том, что счётчик количества товаров не меняется реактивно, так как он в другом компоненте и приходится обновлять страницу, чтобы увидеть количество, но это неправильно. Сразу говорю $emit я не могу использовать, так как компонент Product.vue большой слишком и я не смогу в родителе вызвать . Пробовал через created(), но он тоже не меняет реактивно значение.
Вот код App.vue:
<a href="#0" class="number cart-icon"> <iclass="flaticon-shopping-cart"></i>
<span class="count">({{lengthCart}})</span></a>
<script>
export default {
name: 'App',
data() {
return {
products: [],
totalPrice: 0,
lengthCart: 0
}
},
mounted() {
this.getCartProducts()
},
methods: {
getLength(){
let products = JSON.parse(localStorage.getItem('cart'));
let qty = products.reduce((qty, product) => qty + product.qty, 0);
this.lengthCart = qty
console.log(qty);
}
</script>
Код Products.vue:
<a @click.prevent="addToCart(product, true)" href="cart.html" class="addcart btn--primary style2">Add To Cart </a>
data() {
return(){
qtyCart: 0
}
},
methods: {
addToCart(product, isSingle){
let qty = isSingle ? 1 : $('.qtyValue').val();
let cart = localStorage.getItem('cart');
$('.qtyValue').val(1);
let newProduct = [
{
"id": product.id,
"image_url": product.image_url,
"title": product.title,
"price": product.price,
"qty": qty
}
];
if (!cart){
localStorage.setItem('cart', JSON.stringify(newProduct))
}
else{
cart = JSON.parse(cart);
cart.forEach(productInCart => {
if (productInCart.id === product.id){
productInCart.qty = Number(productInCart.qty) + Number(qty);
newProduct = null;
}
})
Array.prototype.push.apply(cart, newProduct);
localStorage.setItem('cart', JSON.stringify(cart));
}
let cartArr = JSON.parse(cart)
let qtyCart = cartArr.reduce((qty, product) => qty + product.qty, 0);
this.qtyCart = qtyCart
this.calculateCartPrice()
},
Простой
