vuex에서 API에서 데이터를 가져오는 방법
사용자가 제품 페이지를 변경할 때마다 새로운 Ajax 요청이 발생하지 않도록 하기 위해 vuex를 사용하여 서버에서 가져온 일부 데이터를 다른 페이지에 저장하고 싶습니다(헤드리스 전자 상거래입니다).
제 질문은 간단합니다. 가져온 데이터를 저장소에 정의된 어레이에 어떻게 푸시할 수 있습니까?구성 요소의 데이터를 어떻게 가져올 수 있습니까?나는 코드를 작성하고 있지만 내가 잘했는지는 잘 모르겠습니다.
import { createStore } from 'vuex'
import axios from 'axios'
export default createStore({
state: {
products: []
},
mutations: {
updateProductsData(state, products){
// not sure how to proceed here
}
},
actions: {
fetchProducts(){
const baseURL = 'https://www.example.com/app/index.php/wp-json/shop/v1/products';
let productsData = [];
axios.get(baseURL).then( response => {
response.data.forEach( el => {
console.log(el);
let details = {
id: el.id,
slug: el.slug,
name: el.name,
price: el.price,
description: el.description,
short_description: el.short_description
}
productsData.push(details);
});
store.commit('updateProductsData', productsData);
}).catch( e => console.log(e) );
}
}
})
데이터를 로드해야 하는 구성 요소에 이 코드가 있습니다.
export default {
name: 'Home',
data(){
return {
loaded: false,
offers: [],
}
},
created(){
},
mounted(){
this.$store.dispatch('fetchProducts').then( res => this.offers.push(res) )
},
}
제품 데이터 배열을 반환하도록 저장소 작업을 업데이트합니다.
fetchProducts() {
const baseURL = "https://www.example.com/app/index.php/wp-json/shop/v1/products";
const productsData = [];
axios
.get(baseURL)
.then(response => {
response.data.forEach(el => {
console.log(el);
const details = {
id: el.id,
slug: el.slug,
name: el.name,
price: el.price,
description: el.description,
short_description: el.short_description
};
productsData.push(details);
});
})
.catch(e => {
console.log(e);
});
return productsData;
}
이제 구성 요소에서 작업을 발송하면 결과가 반환됩니다.
베터 웨이
이를 위한 더 나은 방법은 단순히 약속인 Axios 호출 자체를 반환하는 것입니다.await
사용자 구성 요소에서.
또는 다음과 같이 Axios 호출을 자체 Promise로 래핑하고 구성 요소의 데이터, 처리 오류 및 개체만으로 해결하여 사용자에게 더 나은 피드백을 제공할 수 있습니다.
fetchProducts() {
const baseURL = "https://www.example.com/app/index.php/wp-json/shop/v1/products";
return new Promise((resolve, reject) => {
axios
.get(baseURL)
.then(response => {
resolve(response.data);
})
.catch(e => {
reject(e);
});
});
}
적절한 방법
스토어를 올바르게 사용하려면 다음과 같은 VueX 작업을 구현해야 합니다.
fetchProducts({ commit }) {
const baseURL = "https://www.example.com/app/index.php/wp-json/shop/v1/products";
axios
.get(baseURL)
.then(response => {
commit("setProductData", res.data);
})
.catch(e => {
console.log(e);
});
});
}
다음 변환을 추가합니다.
setProductData(state, productData) {
state.products = productData.map(product => {
return {
id: product.id,
slug: product.slug,
name: product.name,
price: product.price,
description: product.description,
short_description: product.short_description
};
});
}
구성 요소를 다음과 같이 업데이트:
export default {
name: "Home",
data() {
return {
loaded: false,
offers: []
};
},
computed: {
products() {
return this.$store.state.products;
}
},
mounted() {
this.$store.dispatch("fetchProducts");
}
};
ID로 가져오려면 다음과 같은 계산된 속성을 추가합니다.
findProductById(id) {
return this.products.find(product => product.id === id);
}
사용자 내부updateProductsData
돌연변이 사용state.products = [...products]
로드된 제품을 상태에 추가합니다.
Vuex에 대한 간단한 소개는 https://www.vuemastery.com/courses/vuex-fundamentals/vuex4-intro-to-vuex 에서 확인하십시오.
작용 및 돌연변이의 사용에 대해서는 Vuex의 문서를 참조할 수 있습니다. https://vuex.vuejs.org/guide/actions.html세부적으로...
Vuex에서 제안하는 것처럼 비동기 작업을 수행해야 합니다(예: 서버에서 데이터를 가져오는 작업).그런 다음 아래에 주어진 코드와 같이 상태를 설정하기 위해 가져온 데이터를 사용하는 "변조"를 커밋해야 합니다.
import { createStore } from 'vuex'
import axios from 'axios'
export default createStore({
state: {
products: []
},
mutations: {
updateProductsData(state, products){
// here set your state
state.products = products
}
},
actions: {
fetchProducts({commit}){
const baseURL = 'https://www.example.com/app/index.php/wp-json/shop/v1/products';
let productsData = [];
axios.get(baseURL).then( response => {
response.data.forEach( el => {
console.log(el);
let details = {
id: el.id,
slug: el.slug,
name: el.name,
price: el.price,
description: el.description,
short_description: el.short_description
}
productsData.push(details);
});
store.commit('updateProductsData', productsData);
}).catch( e => console.log(e) );
}
}
})
구성 요소에서 상태를 사용하려는 경우 계산된 특성에 넣을 수 있습니다.
export default {
name: 'Home',
data(){
return {
loaded: false,
}
},
computed:{
// map this.offers to store.state.products
offers(){
return this.$store.state.products
}
},
created(){
},
mounted(){
// dispatch 'fetchProducts' to fetch data
this.$store.dispatch('fetchProducts')
},
}
언급URL : https://stackoverflow.com/questions/71294692/how-to-fetch-data-from-api-in-vuex
'it-source' 카테고리의 다른 글
RAISERROR()의 구문 의미는 무엇입니까? (0) | 2023.07.05 |
---|---|
R의 "던지기"와 동등한 값 (0) | 2023.07.05 |
'완화' 설정내장된 Tomcat에 대한 QueryChars' (0) | 2023.07.05 |
기본 그래픽에서 플롯 영역 외부에 범례를 플롯하시겠습니까? (0) | 2023.06.30 |
SQL 문에 왼쪽 괄호가 누락되어 혼동되는 오류 (0) | 2023.06.30 |