nuxtjs和axios如何使用？

Question

我正在尝试学习 NuxtJs，我一直在关注文档，但在使用 $axios 或 this.$axios 时遇到问题。我尝试创建一个服务目录来向我的 api 发出请求，使事情井井有条和干净。首先我配置了 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/'
    }
  },

然后我创建了我的 store 文件 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()
    }
  },
}

和articlesServices.js文件：

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

我试过变体：

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

只有一个有效，但我的所有请求都将如此相似和硬编码：

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

你能告诉我 axios 和 NuxtJs 的正确用法吗？谢谢

Answer 1

尝试使用 $

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

nuxtjs和axios如何使用？

How to use nuxtjs and axios?

axios

nuxtjs