vuejs에서 vuex로 get request 만들기를 사용하는 방법

vuejs에서 vuex로 get request 만들기를 사용하는 방법

vuex에 제품을 저장하려면 어떻게 해야 합니까? 이것은 나의 인덱스 구성 요소입니다.

import Vue from 'vue'
import Vuex from 'vuex'
import cart from "./modules/cart";
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState()],
  modules: {
    cart,
  }
})

이것은 나의 공리입니다.인스턴스 파일

import axios from "axios"
const API_URL = 'http://localhost:5000/api/';
let headers = {}
const axiosInstance = axios.create({
    baseURL:API_URL,
    headers,
})
export default axiosInstance

이것은 나의 카트.js 파일입니다.

import axiosInstance from "../../helpers/axiosInstance";
const state = {
  products: [],
};
const getters = {
  allProducts: state => state.products
};
const actions = {
  getProducts({
    commit
  }) {
    return axiosInstance
      .get('/products')
      .then(response => {
        console.log(response)
        let products = response.data;
        commit('SET_PRODUCTS', products);
        console.log(products);
        return products;
      })
      .catch(error => console.log('Failed to fetch products', error));
  }
};
const mutations = {
  SAVE_PRODUCTS(state, products) {
    state.products = products;
  }
};
export default {
  state,
  getters,
  actions,
  mutations
};

이것은 나의 템플릿입니다.

<template>
  <div>
      <li
        v-for="product in products"
        :key="product.id"
      >
       {{ product.price }}
      </li>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
   computed: {
    ...mapGetters(['allProducts'])
  },
  mounted() {
    this.$store.dispatch('getProducts')
  }
};
</script>

나는 제품 json을 내 콘솔에 가지고 있습니다.

    {
        "_id": "6452bba224d63e39c56602c3",      
        "price": 200,
      
    },
    {
        "_id": "645396eed62c6accf63b186d",
        "price": 200,
        
    }
]

하지만 나는 내 vuex 스토어에서 아무것도 보이지 않습니다. 그것은 이것을 반환합니다.

state:products:[],
getters:allProducts:[],

어떻게 하면 제 vuex 스토어에 제품을 저장하고 제 vue 구성 요소에 가져올 수 있습니까?

SET_PRODUCTS 변환으로 커밋하려고 합니다.

commit('SET_PRODUCTS', products);

그러나 변환 이름은 SET_PRODUCTS가 아닌 SAVE_PRODUCTS입니다.

SAVE_PRODUCTS(state, products) {
  state.products = products;
}

언급URL : https://stackoverflow.com/questions/76179355/how-to-use-make-a-get-request-with-vuex-in-vuejs