Как исправить ошибку «Превышен максимальный размер стека вызовов»

Question

Я хочу получить данные из базы данных Firebase в реальном времени перед рендерингом страницы, я использую vuex store для обработки всех моих данных.

store / index.js

state: {
      loadedPosts: []
    },
    mutations: {
      setPosts(state, posts) {
        state.loadedPosts = posts;
      },

    },
    actions: {
      nuxtServerInit(vuexContext, context) {
        return axios
          .get("https://new-nuxt-blog.firebaseio.com/posts.json")
          .then(res => {
            const postsArray = [];
            for (const key in res.data) {
              postsArray.push({ ...res.data[key], id: key });
            }
            vuexContext.commit("setPosts", postsArray);
          })
          .catch(e => context.error(e));
      },
      setPosts(vuexContext, posts) {
        vuexContext.commit("setPosts", posts);
      }
    },

, но я получаю сообщение о том, что RangeError Превышен максимальный размер стека вызовов

может кто-нибудь помочь мне исправить эту ошибку, данные, которые я пытаюсь получить, это просто объект:

{"-Lcq_6OaDEff_FPWoMux":{"author":"Ayman Tarig","content":"new nuxt blog","thumbnailLink":"http://smarterware.org/wp-content/uploads/2016/09/technology1.jpg","title":"new nuxt blog"}}

Answer 1

Я попытался запустить ваш код, и он работал отлично - изменения, которые я сделал, -

использовали отдельный экспорт и this. $ Axios

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

export const mutations = {
  setPosts(state, posts) {
    state.loadedPosts = posts;
  }
}

export const actions = {
  nuxtServerInit(vuexContext, context) {      
    // return this.$axios <----CHANGE I MADE
    // code removed for brevity    
  },
  setPosts(vuexContext, posts) {
    vuexContext.commit("setPosts", posts);
  }
}

И все работало отлично - прикрепил скриншот моего экрана