업데이트 시 vuex 상태 업데이트 UI를 만드는 방법

업데이트 시 vuex 상태 업데이트 UI를 만드는 방법

Vuejs와 Vuex를 사용하여 쇼핑 카트 페이지를 만들고 있습니다.카트의 각 품목에는 이 특정 품목에 대해 주문된 품목의 수를 늘리거나 줄이는 수량 카운터가 있어야 합니다.메인 상품 페이지에서 장바구니에 상품을 추가하면 장바구니 페이지를 방문하세요.카운터를 클릭하면 상품 수량이 변경되지만 UI에는 변경이 표시되지 않습니다.페이지를 새로고침한 후에만 변경 내용이 표시되며, 이후 이 특정 카운터에만 새로운 변경 내용이 표시되며, 모든 제품을 추가한 후 새로고침해야만 해당 카운터에 UI 변경 내용이 표시됩니다.

다음은 카트 Vue 컴포넌트를 단순화한 것입니다.

 <template >
    <tbody>
        <tr v-for="product in cartProducts" :key="product.name">
            <td class="quantity">
                <i class="fa fa-minus" @click="decreaseQuantity(product)"></i>
                <p>{{product.quantity}}</p>
                <i class="fa fa-plus" @click="increaseQuantity(product)"></i>
            </td>
        </tr>
    </tbody>
</template>

<script>
export default {
    computed: {
        cartProducts() {
            return this.$store.state.cartProducts;
        },
    },
    methods: {
        increaseQuantity(drug) {
            const existedDrug = this.cartProducts.find(d => d.id === drug.id);
            existedDrug.quantity += 1;
            this.$store.dispatch("setUserDataCart", this.cartProducts);
            console.log(this.$store.state.cartProducts);
        },
        decreaseQuantity(drug) {
            const existedDrug = this.cartProducts.find(d => d.id === drug.id);
            existedDrug.quantity -= 1;
            this.$store.dispatch("setUserDataCart", this.cartProducts);
            console.log(this.$store.state.cartProducts);
        },
    },
};
</script>

여기가 저의 vuex 스토어입니다.

import Vue from "vue";
import Vuex from "vuex";
import VuexPersist from "vuex-persist";

Vue.use(Vuex);
const vuexPersist = new VuexPersist({
  key: "my-app",
  storage: window.localStorage
});

const store = new Vuex.Store({
  state: {
    cartProducts: []
  },
  mutations: {
    SET_USER_CART(state, data) {
      state.cartProducts = data;
    }
  },
  actions: {
    setUserDataCart({ commit }, data) {
      commit("SET_USER_CART", data);
    }
  },
  plugins: [vuexPersist.plugin]
});

export default store;

여러 가지 방법을 시도했습니다. 예를 들어mapState또는 상태를getter운이 없더군제가 뭘 잘못하고 있는지 누가 알 수 있나요?

Vue.js 문서에서:

계산된 속성은 기본적으로 getter 전용입니다.

정해진 메서드 없이 계산된 속성을 변경하려고 합니다.개체 속성만 변경하고 새 속성을 생성하지 않으면 UI 업데이트에 대한 반응이 트리거되지 않을 수 있습니다.

실제로 다른 방법을 사용하여 증감해야 하는 제품의 ID만 전달하고 로직을 스토어의 변환 방식으로 이동하는 것을 추천합니다.또한 업데이트 후 새 개체를 반환하는 메서드를 사용합니다(예:map()변경 방법cartProducts.

store.syslog:

import Vue from "vue";
import Vuex from "vuex";
import VuexPersist from "vuex-persist";

Vue.use(Vuex);
const vuexPersist = new VuexPersist({
  key: "my-app",
  storage: window.localStorage
});

export default new Vuex.Store({
  state: {
    cartProducts: [
      {
        id: 1,
        name: "Drug 1",
        quantity: 1
      },
      {
        id: 2,
        name: "Drug 2",
        quantity: 1
      }
    ]
  },
  mutations: {
    INCREMENT(state, productId) {
      state.cartProducts = state.cartProducts.map(product => {
        if (product.id === productId) {
          product.quantity += 1;
        }
        return product;
      });
    },
    DECREMENT(state, productId) {
      state.cartProducts = state.cartProducts.map(product => {
        if (product.id === productId) {
          product.quantity -= 1;
        }
        return product;
      });
    }
  },
  actions: {
    incrementQuantity({ commit }, productId) {
      commit("INCREMENT", productId);
    },
    decrementQuantity({ commit }, productId) {
      commit("DECREMENT", productId);
    }
  },
  plugins: [vuexPersist.plugin]
});

cart.displaces

<template>
  <table>
    <tbody>
      <tr v-for="product in cartProducts" :key="product.name">
        <td class="quantity">
          <button @click="decreaseQuantity(product)">decrease</button>
          <p>{{ product.quantity || 0 }}</p>
          <button @click="increaseQuantity(product)">increase</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  computed: {
    cartProducts() {
      return this.$store.state.cartProducts;
    }
  },
  methods: {
    increaseQuantity(drug) {
      this.$store.dispatch("incrementQuantity", drug.id);
    },
    decreaseQuantity(drug) {
      this.$store.dispatch("decrementQuantity", drug.id);
    }
  }
};
</script>

vuex 매뉴얼을 주의 깊게 읽어주세요.- https://vuex.vuejs.org/guide/ 상태 변경은 변환 방법으로 이루어집니다.다음은 Docs의 간단한 예입니다.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

언급URL : https://stackoverflow.com/questions/60788909/how-to-make-vuex-state-update-ui-when-its-updated