Как реализовать связь для расчета общей корзины покупок между компонентами? - PullRequest
Новая
       9

Как реализовать связь для расчета общей корзины покупок между компонентами?

0 голосов
/ 21 апреля 2019

как сделать так, чтобы между компонентами получался результат общей корзины покупок при уменьшении или уменьшении запасов клиента в Vue js?

у меня есть 3 компонента в этом случае

  1. один - header/navbar.vue со значком корзина / я использую модал.
  2. shop.vue для добавления в корзину,
  3. и detail.vue добавили в корзину также

Я уже могу добавить корзину в shop.vue и добавить ее в базу данных, но я не знаю, как заставить их общаться, когда клиент увеличивает запас, а также когда клиент добавляет в корзину несколько раз, пункт, который я делаю, один за другим лайк когда клиент добавляет корзину item1, а затем он показывает на 1 корзине, один элемент, и клиент снова добавляет в корзину item1 со складом, он также добавит в корзину basken, он не сделает элемент 1018 * Я не знаю, как сделать их автоматически, чтобы быть таким вот код из моего 

 addcart(val) {
 this.$axios
          .post(
            '/api/cart/addcart',
            {
              item: val,
              amount: 1,
            },
            {
              headers: token,
            },
          )
          .then(({ data }) => {
            console.log('added')
          })
          .catch(err => {
            this.$swal.fire({
              type: 'error',
              text: err.response.data.error,
            });
          });
      }

и в моем заголовке / навигационной панели / для извлечения корзины я указываю данные с сервера, чтобы получить идентификатор пользователя, отображающий корзину на значке корзины. я подаю в суд на MongoDB, Mongoose за сервер и базу данных Есть ли простой пример, чтобы сделать соединение компонентов для получения и отправки данных для этого случая?

1 Ответ

0 голосов
/ 21 апреля 2019

Возможно, вы захотите создать компонент общего владельца, чтобы разделить состояние между этими компонентами из Thinking in React :

Для каждого элемента состояния в вашей заявке:

· Определите каждый компонент, который отображает что-либо на основе этого состояния.

· Найти общий компонент-владелец (один компонент над всеми компонентами, которым требуется состояние в иерархии).

· Либо общий владелец, либо другой компонент выше по иерархии должен владеть состояние.

· Если вы не можете найти компонент, в котором есть смысл владеть состояние, создайте новый компонент просто для хранения состояния и добавьте его где-то в иерархии над компонентом общего владельца.

В вашем случае ваш компонент может быть вложен в компонент общего владельца: 

Container.vue/
│
├── Navbar.vue /
│
├── Shop.vue /
│
├── Detail.vue /

Если вы обновляете свой CartItem в Shop.vue, вы можете обновить свой результат, используя emit

Я создаю коды и поле , чтобы повторить вашу проблему.

Вот ссылка: https://codesandbox.io/s/132v86qm4q

Надеюсь, я решу ваши проблемы!

...