Обновление DOM при изменении состояния магазина Vuex

Question

У меня есть кнопка «Добавить в корзину», которая запускает действие магазина Vuex:

<button
  @click="addToBasket(item)"
>
  Add To Basket
</button>

Магазин Vuex:

const actions = {
    addToBasket({ commit }, item) {
        commit("setBasketItems", item);
    }
};

const mutations = {
    setBasketItems: (state, item) => {
        let basketFind = state.basket.find(i => {
            return i.id === item.id;
        });

        if (basketFind) {
            basketFind.quantity += 1;
            return;
        }

        item.quantity = 1;

        state.basket.push(item);
    }
};

const state = {
    basket: []
};

const getters = {
    basketItems: state => state.basket,
};

Когда я проверяю магазин Vuex в dev tools, это делать то, что должен, т.е. добавлять элемент, если он не существует, увеличивать количество, если он есть.

Я пытаюсь обновить DOM, чтобы отобразить количество элемента:

computed: {
  computedBasketItems: function() {
    return this.$store.getters.basketItems;
  }
},

<CartItem
  v-for="item in computedBasketItems"
  :key="item.id"
  :item="item"
/>

CartItem (принимает элемент в качестве реквизита):

<div class="dropdown-item">
  <i class="fa fa-times-circle"></i>
  <router-link to="">{{ item.name }}</router-link>
  <p>{{ item.quantity }}x</p>
  <p>{{ item.price }}</p>
</div>

// props...
    props: ["item"],

Добавляет элемент в DOM и устанавливает количество в «1», но не обновляет количество при его изменении.

Как я могу это сделать?

Answer 1

  const mutations = {
    setBasketItems: (state, item) => {
      // in this line we checking if item id equal state backet item id it returns first matched element 
      let basketFind = state.basket.find((i) => {
        return i.id === item.id;
      });

      // here we checking if basketFind has value(aka array contains value) 
      if (basketFind) {

        // if basketFind is true in this case will be implement this block
        state.basket = state.basket.map((x) =>
          x.id === item.id ? { ...x, quantity: x.quantity + 1 } : x
        );

        // in this line we reassigning basket prop of state with transformed data
        // just checking if  x.id === item.id then increase matched element's prop quantity  
        // also we leave other elements which contains state.basket array
        return;

      }
      // if basketFind is false we going this line
      // again, reassigning basket prop of state. adding existing element and adding new element with value 1 of quantity prop
      state.basket = [
        ...state.basket,
        ...[item].map((x) => ({ ...x, quantity: 1 })),
      ];
    },
  };

Answer 2

Причина в том, что добавляемые вами предметы не являются реактивными. только ваш массив корзин реагирует. и добавление элемента к нему будет повторно визуализировать. но вы просто нажимаете на Предмет, и если вы изменяете свойство Предмета, оно не реагирует. для этого используйте Vue.$set(basketFind,'quantity',basketFind.quantity+1) вместо basketFind.quantity + = 1;