Как передать переменную из дочернего компонента в родительский реактивно через Vue 3?

Question

[Rab1d]

В общем в чём суть. Есть у меня страница продуктов в компоненте 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()
    },

Comments

[WapSter]

Сразу говорю $emit я не могу использовать, так как компонент Product.vue большой слишком и я не смогу в родителе вызвать .

как размер компонента влияет на механику работы emit

[Rab1d]

WapSter, тем что при вызове в родителе компонента <Products :kakoyto-emit="snizyMethod"></Products>
Я получаю дубликат страницы продуктов

[WapSter]

Rab1d, ну так ты почитай как использовать emit для начала, а то то что ты показал, какая-то тупость

Answer 1

[Yesbol Sariyev]

Я не эксперт :D

Но есть куча вариантов решения от использования emit до каких ни-будь state хранилищ по типу Pinia для Vue 3

Самый легкий способ установить VueUse и использовать функцию useLocalStorage

Она позволяет реактивно работать с localStorage
При изменении данных в одной точке в другой она также изменится

Если не хочется скачивать другие зависимости можно написать свою функцию которая будет реактивно работать с localStorage но лучше уж не придумывать велосипед.