Как правильно подключить axios для vuex?

Question

[Duh]

Использую nuxtjs/axios, создал плагин для работы как указали на сайте

export default function ({ $axios }, inject) {

  const api = $axios.create({
    headers: {
      common: {
        'X-Requested-With': 'XMLHttpRequest',
        'Accept'          : 'application/json',
      }
    }
  })

  api.setBaseURL('http://laravel/api/')

  inject('api', api)
}

Подключаю плагин

plugins: [
    '@/plugins/axios',
  ],

через хук beforeRouteEnter, вызываю action load_article

async beforeRouteEnter(to, from, next) {

    await store.dispatch('article/load_article', {
      id: to.params.id
    })

  }

при вызове получаю Uncaught (in promise) TypeError: _this.$api is undefined. То что undefined это понятно!

export const FETCH_ARTICLE = 'load_article'

export default {
	async [FETCH_ARTICLE]({ commit }, payload) {

		let endpoint = 'article/'+payload.id
		const data = ( await this.$api.get(endpoint) ).data

		commit(SET_ARTICLE, {
			data: data.data
		})
	},
}

Вопрос в том как в этом случае подключить axios? Использовал $axios.$get, получаю undefined

Подключал и без плагина, через nuxt.config.js файл

axios: {
    baseURL: 'http://laravel/api/',
  }

Comments

[WapSter]

Что-то не как на сайте ты используешь

[Duh]

WapSter, что именно не как на сайте?

[WapSter]

haa, он добавляется как модуль. В твоем коде я не увидел перехватчиков, и смысл от такого подключения?

[Duh]

WapSter, на сайте есть 2 способа, попробовал все два. Пока оставил способ через плагин. Не вижу проблем вообще, если нужно будет добавить перехватчики то просто добавлю и все

Answer 1

[Алекс Глебов]

Axios нужно добавить в nuxt.config.js как модуль
https://axios.nuxtjs.org/setup#configure

Вместо beforeRouteEnter используйте fetch hook
https://nuxtjs.org/docs/features/data-fetching/

или nuxtServerInit если нужно вызывать метод на всех страницах
https://nuxtjs.org/docs/directory-structure/store/...

Comments

[Duh]

1) Axios добавлен в nuxt.config.js, как модуль

buildModules: [
    '@nuxtjs/axios'
  ],

но помимо этого я сделал как тут и подключил как плагин. Axios не работает только когда я вызываю метод beforeRouteEnter, потому что в этот момент не создан this.
2) Если использую fetch hook то сначала показывает страницу и только потом показывает данные. И чтобы решить эту проблему пришел к beforeRouteEnter, потому что мне нужно изначально получить данные и только потом показать страницу.
3) nuxtServerInit не подходит

[WapSter]

haa, почему ты решил, что this не ссылается на nuxt. И как отметил Алекс Глебов к контексту nuxt у тебя есть доступ через fetch или asyncData.

Если использую fetch hook то сначала показывает страницу и только потом показывает данные.

ошибка в твоем коде, а не в реализации хука. У меня всегда ждет пока не получит данные.
И вообще какой смысл записывать данные в стор которые нужны на одной определенной странице, только код раздуваешь и кучу лишних телодвижений. Это как имеешь ключ и можешь открыть замок, но ты зачем-то вызываешь слесаря, чтобы он открыл замок.

[Duh]

WapSter, насчет стор согласен. А в чем именно ошибка? не понимаю

[Алекс Глебов]

haa,

но помимо этого я сделал как тут и подключил как плагин

Совсем не как там, плагин нужен только для настройки axios из модуля. А вы создали в нем отдельный инстанс аксиоса. Так словите утечки в ssr.
Используйте тот, что из модуля this.$axios

[Алекс Глебов]

Если использую fetch hook то сначала показывает страницу и только потом показывает данные.

Тогда asyncData

[Duh]

Алекс Глебов, да спасибо, всего лишь нужно было asyncData использовать на странице. AsyncData ждет пока данные не получит, а fetch не ждет, сразу кидает на страницу. тут тоже писали об этом