управление состоянием в vue js с множественным условием if для извлечения данных с использованием ID

#javascript #vue.js #state-management

#javascript #vue.js #управление состоянием

Вопрос:

Я использую vue.js управление состоянием для выборки продуктов, state.products — это массив [], в котором хранятся мои данные. я хочу извлекать данные с помощью ID, я ставлю условие, если state.products не пуст, и я проверяю условие в операторе if, если уже извлеченные данные совпадают с идентификатором, который я использовал как статический, чем возвращать другим способом, он попадет в API для получения данных. но в нем есть какая-то ошибка, пожалуйста, помогите мне найти мою ошибку

index.js

  

    loadProducts({ commit }, id) {
                if (this.state.products.length > 0) {
                    var i;
                    for (i = 0; i < this.state.products.length; i  ) {
                        if (this.state.products[i].category_id == 1 amp;amp; this.state.products[i].category_id == 2) {
                            console.log("RETURN")
                            return;
                        }
                    }
                }
                axios.get('/loadProducts/'   id)
                    .then(({ data }) => {
                        this.state.products = data.items;
                        console.log(this.state.products);
                        commit('set_products', data.items)
                    })
    
            },

 

Products.vue

  

    mounted () {
                this.fetchItems();
                this.$store.dispatch("loadProducts",this.category);
            },
            computed:{
                ...mapState([
                    'products'
                ])
            },

 

Ответ №1:

Вы можете отфильтровать ответ и передать отфильтрованный массив мутации:

 actions: {
    loadProducts({ commit }, id) {
      axios.get("/loadProducts/"   id).then(data => {
        var filtered_products = data.items.filter(
          x => x.category_id === 1 amp;amp; x.category_id === 2
        );
        commit("SET_PRODUCTS", filtered_products);
      });
    },
  },
  mutations: {
    SET_PRODUCTS(state, payload) {
      state.products = payload;
    },
  },
 

В зависимости от вашего варианта использования вы также можете использовать геттер для фильтрации продуктов, а затем импортировать геттер вместо состояния.