Почему axios nuxt не отправляет запрос?

Question

[Артем Кондрацкий]

Здравствуйте, есть проблема с получением данных через axios модуль для nuxt. Запрос просто не отправляется.

store/portfolio.js

export const state = () => ({
  portfolio: []
})

export const mutations = {
  updatePortfolio (state, items) {
    state.portfolio = items
  }
}

export const actions = {
  async fetchPortfolio ({ commit }) {
    const portfolio = await this.$axios.$get('http://localhost:8081/portfolio')
    commit('updatePortfolio', portfolio)
  }
}

export const getters = {
  portfolio: s => s.portfolio
}

components/Wall.vue

import Item from '~/components/Portfolio/Item.vue'

export default {
  name: 'PortfolioWall',
  components: {
    Item
  },
  computed: {
    portfolio () {
      return this.$store.getters['portfolio/portfolio']
    }
  },
  async fetch ({ store }) {
    if (store.getters['portfolio/portfolio'].lenght === 0) {
      await store.dispatch('portfolio/fetchPortfolio')
    }
  }
}

В консоли никаких ошибок не выводится.

Comments

[Артем Кондрацкий]

если вынести fetch в index.vue, то запрос отправляется

Answer 1

[Alex]

Сложно дать какой-то четкий ответ не видя полной картины.
Но метод fetch вроде как может работать только у компонентов-страниц. А у вас, насколько я понимаю это не тот случай.

Comments

[Артем Кондрацкий]

Да, fetch вызывается в компоненте.
Наверное мне стоит перенести из логику из store в компонент, т. к. это более правильно, потому что данные store используется в одном компоненте.

Answer 2

[Alexs7]

Тоже столкнулся с такой проблемой в итоге решил так:
из nuxtServerInit вынес всю асинхронщину в отдельный action

async nuxtServerInit({dispatch}) {
        await dispatch('loadInitialPosts')
},

И после этого, в тех компонентах, которые не рендерили асинхронные данные из стора. Теперь просто дергаю этот экшен (loadInitialPosts), посты грузятся в стор, и вставляю эти данные через computed в разметку компонента и посты появляются.
Вот так выглядит компонент, проверка if, чтобы лишний раз не дергать сервер

created() {
        if (!this.getPostsLoaded || this.getPostsLoaded.length === 0) {
             // Если стор пустой
            this.$store.dispatch('loadInitialPosts')
        }
    },
computed: {
    getPostsLoaded() {
        return this.$store.getters.getPostsLoaded
    }
}