Общее количество элементов в корзине не обновляется, несмотря на то, что существует одноэлементный класс, управляющий состоянием корзины.

Question

Мой сайт имеет заголовок, который отображает общее количество товаров в корзине.Для этого я создал файл с именем shoppingCart.js следующим образом:

export default new class ShoppingCart {
  constructor() {
    this.loadCart();
  }

  saveCart() {
    window.localStorage.setItem('cart', JSON.stringify(this.cache));
  }

  loadCart() {
    const cart = JSON.parse(window.localStorage.getItem('cart') || null);
    this.cache = (cart && isArray(cart) && cart.length) ? cart : [];
  }

  removeProduct(product) {
    //Remove the product from the this.cache array.
    //Save the cart in the localStorage
  }

  addProduct(product) {
    //Update this.cache, first...
    //Save the cart in the localStorage
  }

  get products() {
    return Object.freeze([...this.cache]);
  }
}();

Затем в HeaderView.vue я импортировал вышеуказанный класс и создал вычисляемый метод для получения общего числаэлементов в корзине:

import ShoppingCart from '../helpers/shoppingCart';

export default {
  name: 'HeaderView',

  computed: {
    totalCartItems() {
      return ShoppingCart.products.length;
    },
  },
};

На странице ProductView.vue (где товар добавлен в корзину) я также импортирую ShoppingCart (как указано выше) и имею метод с именем "addToCart", которыйПредполагается добавить данный продукт в корзину:

methods: {
  addToCart() {
    ShoppingCart.addProduct(
      this.product
    );
  },
},

Однако, независимо от того, что я делаю или пробовал, общее количество товаров в корзине не отображается в заголовке, если я не перезагрузил страницу,(Я бы хотел, чтобы он обновлялся после вызова метода addToCart в ProductView.vue.

Не могли бы вы сообщить мне, что я делаю неправильно?

РЕДАКТИРОВАТЬ: Обратите внимание, чтоМне нужно использовать модули для этого, и я не хочу использовать для этого "Vue.prototype. $" Или плагины VueJS.

Answer 1

Ваш объект корзины покупок по умолчанию не реагирует. Вы можете попытаться добавить его в часы реагирования, поместив его в объект / функцию данных (не проверено)

import ShoppingCart from '../helpers/shoppingCart';

export default {
  name: 'HeaderView',

  data: function() {
    return {
      shoppingCart: ShoppingCart
    };
  }

  computed: {
    totalCartItems() {
      return this.shoppingCart.products.length;
    },
  },
};

В качестве альтернативы, я бы предложил вам использовать Vuex. Похоже, что функциональность, которую вы пытаетесь создать, решается с помощью vuex.

Answer 2

Я думаю, что вы неправильно используете вычисленные значения.Из документов :

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

Это означает, что кэш вычисленных значений будет обновляться только в том случае, если обновляется атрибут (используемый вычисленным значением).Здесь вы не используете атрибут (у вас нет доступа к this. в totalCartItems), поэтому вычисленное значение никогда не обновляется.

Как указано в документации, вы можете использовать метод вместо вычисляемогозначение