CODEWITHSUNDEEP
axiosnuxt.js
ytsejam
ytsejam

Reputation: 3429

How to use nuxtjs and axios?

I am trying to learn NuxtJs, I have been following documentation but i am having problems while using $axios or this.$axios. I try to create a services directory to make my requests to my api to make things organized and clean. First I have configured my nuxt.config.js

modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {
    baseURL: "http://localhost:8000/api/"
  },
  publicRuntimeConfig: {
    axios: {
      baseURL: 'http://localhost:8000/api/'
    }
  },

and then I have created my store file articles.js

import articlesService from '~/services/articlesService'
export const state = () => ({
    indexArticles: [],
})
export const actions = {
  async fetchArticles ({ commit, dispatch }) {
    try {
      const response = await articlesService.fetchArticles()
      commit('fetchStart')
      commit('setArticles', response.data.results)
      commit('fetchEnd')
      this._vm.$q.loading.hide()
      return response
    } catch (error) {
      commit('setError', error)
      this._vm.$q.loading.hide()
    }
  },
}

and articlesServices.js file:

function fetchIndexArticles () {
  return this.$axios.get('articleslist/index/')
}
export default {
  fetchIndexArticles
}

I have tried variations:

function fetchIndexArticles ({$axios}) {
  return $axios.get('articleslist/index/')
}

Only working one is but all my requests will be such similar and hard-coded:

import axios from 'axios'
function fetchIndexArticles () {
  return axios.get('http://localhost:8000/api/articleslist/index/')
}

Can you show me the correct usage of axios of NuxtJs ? Thanks

Upvotes: 0

Views: 673

Answers (1)

ahmadbagwi
ahmadbagwi

Reputation: 58

try to using $

function fetchIndexArticles () {
  return this.$axios.$get('articleslist/index/')
}

Upvotes: 1

Related Questions