Vue 구성 요소가 getter 데이터로 다시 로드되지 않음(반응 없음)

Vue 구성 요소가 getter 데이터로 다시 로드되지 않음(반응 없음)

저는 Vue와 Vuex에 이 e커머스 모의 앱을 가지고 있습니다.이 페이지에는 전화기의 리스트가 표시되고, 체크 박스를 사용해 전화기의 브랜드에 근거해 전화기를 필터링 하는 필터가 있습니다.

문제는 필터링할 확인란을 클릭해도 페이지가 바로 새로 고쳐지지 않는다는 것입니다.다른 페이지를 클릭하여 원래 페이지로 돌아가면 페이지가 필터링됩니다.

이 소스코드입니다.간략화를 위해 일부 코드가 삭제되었습니다.

제품.표시하다

import { mapActions } from "vuex";
import BrandFilter from "../components/BrandFilter";

export default {
  data() {
    return {
      products: this.$store.getters.filterProducts
    };
  },
  components: { BrandFilter }
};

<template>
  <div class="container">
    <div class="row">
      <div class="col-lg-3"><BrandFilter></BrandFilter></div>
      <div class="col-lg-9">
        <div class="row">
          <div v-for="product in products" :key="product.id">            
                <h4 class="card-title product__title">
                  {{ product.title }}
                </h4>                            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

브랜드 필터표시하다

export default {
  name: "BrandFilter",
  data() {
    return {
      brands: this.$store.state.brands
    };
  },
  methods: {
    onChangeSelectBox(e) {
      debugger;
      const name = e.target.name;
      const value = e.target.checked;
      if (value) {
        this.$store.commit("addBrandToFilter", name);
      } else {
        this.$store.commit("removeBrandFromFilter", name);
      }
    }
  }
};

<template>
  <div class="card mb-3">
    <div class="card-header">
      <h3>Brands</h3>
    </div>
    <ul class="list-group flex-row flex-wrap">
      <li class="list-group-item flex-50" v-for="brand in brands" :key="brand">
        <label class="custom-checkbox text-capitalize">
          {{ brand }}
          <input
            type="checkbox"
            :name="brand"
            class="custom-checkbox__input"
            @input="onChangeSelectBox($event)"
          />
          <span class="custom-checkbox__span"></span>
        </label>
      </li>
    </ul>
  </div>
</template>

store/index.displaces

import Vue from "vue";
import Vuex from "vuex";
import { phones } from "../data/phones";
import { brands } from "../data/brands";
import { brandFilter } from "../filters/brandFilter";

Vue.use(Vuex);

export default new Vuex.Store({
  strict: true,
  state: {
    products: phones,
    brands: brands,
    cart: [],
    brandFilter: ""
  },
  getters: {
    filterProducts(state) {
      debugger;
      const brands = state.brandFilter;
      const filterByBrandArr = brandFilter(state.products, brands);
      return filterByBrandArr;
    }
  },
  mutations: {    
    addBrandToFilter: (state, brand) => {
      debugger;
      if (state.brandFilter.includes(brand)) return void 0;

      state.brandFilter += brand;
    },
    removeBrandFromFilter: (state, brand) => {
      debugger;
      const reg = new RegExp(brand, "gi");
      state.brandFilter = state.brandFilter.replace(reg, "");
    }
  }
});

제품에서 데이터 항목을 getter로 설정한 경우.vue는 한 번만 할당됩니다.getter가 변경되어도 데이터는 변경되지 않습니다.

data() {
  return {
    products: this.$store.getters.filterProducts  // ❌ Incorrect
  }
}

대신 계산 사용:mapGetters컴포넌트 데이터를 Vuex 데이터와 동기화하려면 다음 절차를 수행합니다.

import { mapGetters } from 'vuex';

computed: {
  ...mapGetters(['filterProducts'])  // ✅ Correct
}

계산된 템플릿을 사용하도록 변경합니다.

<div v-for="product in filterProducts" :key="product.id">            
   <h4 class="card-title product__title">
      {{ product.title }}
   </h4>                            
</div>

언급URL : https://stackoverflow.com/questions/65588601/vue-component-doesnt-reload-with-getter-data-not-reactive