vuex에서 API에서 데이터를 가져오는 방법

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