kondrackii
@kondrackii
1 + 1 = 2

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

Здравствуйте, есть проблема с получением данных через 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')
    }
  }
}



В консоли никаких ошибок не выводится.
  • Вопрос задан
  • 199 просмотров
Решения вопроса 1
Kozack
@Kozack
Thinking about a11y
Сложно дать какой-то четкий ответ не видя полной картины.
Но метод fetch вроде как может работать только у компонентов-страниц. А у вас, насколько я понимаю это не тот случай.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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
    }
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы