axios를 사용하여 vuex의 API에서 데이터를 얻는 방법은 무엇입니까?

axios를 사용하여 vuex의 API에서 데이터를 얻는 방법은 무엇입니까?

API larabel에서 가져온 데이터를 가지고 있으며, 여기 상태에 있는 코드가 있습니다.js

import axios from 'axios'
import {apiPostGet} from '../api/api'
export default {
  data: axios({
    method: 'GET',
    url: apiPostGet('Kategori')
  }).then(
    response => {
      return response.data.kategori
    }
  ).catch(
    error => {
      return error.response
    }
  )
}

그리고 이건 gteeters.code로 된 내 코드야.

export default {
  datas: state => {
    return state.data
  }
}

그리고 이것은 index.discode의 내 코드입니다.

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
   state,
   getters
})

Data훅은 동기적으로 반환해야 합니다.로드를 에 추가해야 합니다.created또는mounted데이터/상태에 속성을 추가하기만 하면 반응성이 향상됩니다.

Axios를 사용한 데이터 로딩은 비동기이기 때문에 액션으로 트리거해야 합니다.돌연변이는 동시에 실행되어야 합니다.초기 로드를 추가했습니다.created. (mounted또, 동작합니다.

Vuex 도우미를 사용했는데mapState상태 속성을 컴포넌트에 매핑합니다.getter를 사용하는 것도 좋지만mapState쓰기가 더 쉬워요.

아래 데모나 이 바이올린을 봐주세요.

또한 아래 Vuex 버전의 코드에 대한 코멘트를 해제하고 위의 앱에 코멘트를 달아 Axios가 Vuex를 사용하지 않고 어떻게 작업하고 있는지 확인해 주십시오.

const URL = 'https://jsonplaceholder.typicode.com/posts';

const store = new Vuex.Store({
  state: {
    posts: [],
    loading: true
  },
  actions: {
    loadData({
      commit
    }) {
      axios.get(URL).then((response) => {
        // console.log(response.data, this)
        commit('updatePosts', response.data)
        commit('changeLoadingState', false)
      })
    }
  },
  mutations: {
    updatePosts(state, posts) {
      state.posts = posts
    },
    changeLoadingState(state, loading) {
      state.loading = loading
    }
  }
})

new Vue({
  el: '#app',
  computed: Vuex.mapState(['posts', 'loading']),
  store,
  created() {
    //console.log(this.$store)
    this.$store.dispatch('loadData') // dispatch loading
  }
})

/*
	//example with-out vuex
  
new Vue({
	el: '#app',
	data() {
  	return {
    	loading: true,
      posts: [] // add posts here so reactivity is working, also undefined would be OK
    }
  },
  created() {
  	//this.loading = true --> not needed already set in data
  	axios.get(URL).then((response) => {
    	// console.log(response.data, this)
      this.posts = response.data
      this.loading = false
    })
  }
})

*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<div id="app">
  <div v-if="loading">
    loading...
  </div>
  <div v-else>
    <ul>
      <li v-for="post in posts">
        <h1>
          {{post.title}}
        </h1>
        <p>
          {{post.body}}
        </p>
      </li>
    </ul>
  </div>
</div>

AWolf 솔루션을 사용하지만 loadData 메서드에서 오류 처리가 약간 개선되었습니다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  function getUrlParams() {
    var url_params = new URLSearchParams();
    if (window.location.toString().indexOf("?") != -1) {
      var href_part = window.location.search.split('?')[1]
      href_part.replace(/([^=&]+)=([^&]*)/g,
        function(m, key, value) {
          var attr = decodeURIComponent(key)
          var val = decodeURIComponent(value)
          url_params.append(attr, val);
        });
    }
    // for(var pair of url_params.entries()) { consolas.log(pair[0]+ '->'+ pair[1]); }
    return url_params;
  }


  function getServerData(url, urlParams) {
    if (typeof url_params == "undefined") {
      urlParams = getUrlParams()
    }
    return axios.get(url, {
        params: urlParams
      })
      .then(response => {
        return response;
      })
      .catch(function(error) {
        console.error(error)
        return error.response;
      })
  }

  // Action !!!
  getServerData(url, url_params)
    .then(response => {
      if (response.status === 204) {
        var warningMsg = response.statusText
        console.warn(warningMsg)
        return
      } else if (response.status === 404 || response.status === 400) {
        var errorMsg = response.statusText // + ": "  + response.data.msg // this is my api
        console.error(errorMsg)
        return;
      } else {
        var data = response.data
        var dataType = (typeof data)
        if (dataType === 'undefined') {
          var msg = 'unexpected error occurred while fetching data !!!'
          // pass here to the ui change method the msg aka
          // showMyMsg ( msg , "error")
        } else {
          var items = data.dat // obs this is my api aka "dat" attribute - that is whatever happens to be your json key to get the data from
          // call here the ui building method
          // BuildList ( items )
        }
        return
      }
    })
</script>

언급URL : https://stackoverflow.com/questions/48455175/how-to-get-data-from-api-in-vuex-using-axios