如何在 Nuxt.js 的 Vuex 中的实用程序函数中使用`$axios`答案

【问题标题】：How to use `$axios` in utility function in Vuex of Nuxt.js如何在 Nuxt.js 的 Vuex 中的实用程序函数中使用`$axios`
【发布时间】：2019-02-07 09:51:16
【问题描述】：

我正在如下配置 Nuxt.js 的 VUEX。

store
├── README.md
├── posts
│   ├── actions.js
│   ├── getters.js
│   ├── index.js
│   ├── mutations.js
│   └── utils
│       └── getPostById.js
└── index.js

我在 nuxt.config.js 中的模块中添加了@nuxtjs/axios，并且可以在操作中使用this.$axios.$get。
但是，您不能在 store/posts/utils/getPostById.js 中使用 A。
将出现Cannot read property '$axios' of undefined 的错误。

每个代码描述如下。

・ store/index.js

import Vuex from 'vuex'
import postsModule from './posts'

new Vuex.Store({
  modules: {
    posts: postsModule
  }
})

・store/posts/index.js

import actions from './actions'
import getters from './getters'
import mutations from './mutations'

export const state = () => ({
  posts: [],
  post: {}
})

export default {
  namespaced: true,
  state,
  actions,
  getters,
  mutations
}

・ store/posts/actions.js

import getPostById from './utils/getPostById'

export default {
  async fetchPost({ commit }, count = 10) {
    const params = { count: count }
    // Here `$axios` can be used normally
    const result = await this.$axios.$get("ApiUrl")
    commit('setPosts', result)
  },
  async fetchPostById({ commit }, category_ids, count = 10) {
    const topCommunities = {}
    const result = await getPostById(id)
    commit('setPost', result)
  }
}

・ store/posts/utils/getPostById.js

export default async function(post_id) {
  // Here `$axios` can not use
  const result = await this.$axios.$get(`${ApiUrl}/${post_id}`)
  return result
}

如何在getPostById.js 中使用this.$axios.$get？

【问题讨论】：

标签： javascript vue.js axios vuex nuxt.js

【解决方案1】：

自问题发布以来，发生了很多变化。您现在可以通过this.$axios 访问商店中的$axios 实用程序。 nuxt 插件使用inject 使$axios 对象在商店中可用，如here 所述。

举个例子：

export const actions = {
    async fetchUser () {
        let user = await this.$axios.$get('/me');
    }
}

【讨论】：

【解决方案2】：

据我所知，您只能在商店中的操作下访问您的 nuxtServerInit() 中的 axios，如下所示

async nuxtServerInit ({ commit }, { $axios }) {
  const ip = await $axios.$get('http://icanhazip.com')
  commit('SET_IP', ip)
}

查看此页面https://axios.nuxtjs.org/usage，了解有关如何在 NuxtJS 项目中使用 axios 的更多信息。

【讨论】：

【解决方案3】：

这是在nuxt.js 中直接使用axios 模块

组件

异步数据

async asyncData({ $axios }) {
  const ip = await $axios.$get('http://icanhazip.com')
  ....
}

方法/创建/安装/等

methods: {
  async fetchSomething() {
    const ip = await this.$axios.$get('http://icanhazip.com')
    ....
  }
}

商店操作

{
  actions: {
    async getIP ({ commit }) {
      const ip = await this.$axios.$get('http://icanhazip.com')
      .......
    }
  }
}

快捷方式

// Normal usage with axios
let data = (await $axios.get('...')).data

// Fetch Style
let data = await $axios.$get('...')

这里是您可以用来访问nuxt.js $axios 模块的方式

请记住，这是做出此答案时的新 v5.12.3 版本

也可以查看axios module link from nuxt js website

【讨论】：