Rest Framework и Axios не могут связывать оценки API данных - PullRequest
Новая
       12

Rest Framework и Axios не могут связывать оценки API данных

0 голосов
/ 01 апреля 2019

Я пытаюсь научиться использовать DRF и VueJS с Axios. Я могу получить ответ JSON, когда проверяю URL в браузере. Когда я пытаюсь использовать, получаю JSONResponse, используя Vuex и Axios. Я получаю ошибку Cannot read property 'getters' of undefined в консоли разработчиков. Python-сервер выдает ошибку 404: 

"GET /anonymous%20function HTTP/1.1" 404 2682

Вот как я пытаюсь получить API 

import ApiService from '../services/api.service'
import { FETCH_CATS,
         FETCH_A_CAT
      } from './actions.type'
import { FETCH_START,
         FETCH_END,
         SET_CATS,
         SET_A_CAT,

         SET_ERROR
       } from './mutations.type'
const state = {
  cats: [],
  cat: {},
  errors: {},
  loading: false
}
const getters = {
  currentCat (state) {
    return state.cat
  },
  cats (state) {
    return state.cats;
  },
  isLoading (state) {
    return state.loading;
  }
}
const actions = {
  [FETCH_CATS] (context, payload) {
    context.commit(FETCH_START)
    return ApiService
      .get('cats')
      .then(({data}) => {
        context.commit(SET_CATS, data.cats.results);
        context.commit(FETCH_END)
      }
      .catch(({response})) => {
        context.commit(SET_ERROR, response.data.errors)
      })
  },
  [FETCH_A_CAT] (context, payload) {
    context.commit(FETCH_START)
    const {cat_id} = payload
    return ApiService
      .get(`cats/${cat_id}`)
      .then(({data}) => {
        context.commit(SET_A_CAT, data.cats);
        context.commit(FETCH_END)
      })
      .catch(({response}) => {
        context.commit(SET_ERROR, response.data.errors)
      })
  }
}
const mutations = {
  [FETCH_START] (state) {
    state.loading = true
  },
  [FETCH_END] (state) {
    state.loading = false
  },
  [SET_CATS] (state, pCats) {
    state.cats = pCats
    state.errors = {}
  },
  [SET_A_CAT] (state, pCat) {
    state.cat = pCat
    state.errors = {}
  },
  [SET_ERROR] (state) {
    state.errors = errors
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

Это мой список котов: 

<template>
  <ul id="catList">
    <li v-for="cat in cats">
        <div v-if="cat.photo" class="photo-container">
          <img :src="cat.photo"
               alt="cat.name"
               height="200px"
               width="200px"/>
        </div>

    </li>
  </ul>
</template>
<script>
  import { mapGetters } from 'vuex'
export default {
    name: 'catList',
    computed: {
      ...mapGetters([
        'cats',
        'isLoading'
      ])
    }
  }
</script>

и я пытаюсь использовать его в Home.vue 

<template>
  <section class="container">
    <h1> Our cuttest cats </h1>
    <catList></catList>
  </section>
</template>
<script>
  import redirectButton from '../components/buttons/redirect'
  import catList from '../components/CatsList'
  import { FETCH_CATS } from '../store/actions.type'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      redirectButton,
      catList
    },
    mounted () {
      this.$store.dispatch(FETCH_CATS)
      .then(() => {
        console.log("YOUPI");
      })
      .catch((err) => {
        console.log("ERR : ", err);
      })
    }
  }
</script>

Это мой api.service: 

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { API_URL } from './config'
const ApiService = {
  init () {
    Vue.use(VueAxios, axios)
    Vue.axios.defaults.baseURL = API_URL
  },
  get (resource, slug='') {
    return Vue.axios
            .get(`${resource}\${slug}`)
            .catch((error) => {
              throw new Error(`ApiService ${error}`)
            })
  },
}
export default ApiService

и мой конфиг: 

export default {}
export const API_URL = 'http://localhost:8000/api'

Можете ли вы помочь мне оценить результат? Спасибо

...