#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;
},
},
В зависимости от вашего варианта использования вы также можете использовать геттер для фильтрации продуктов, а затем импортировать геттер вместо состояния.