How to solve Maximum call stack size exceeded Error in nuxt.js

Question

I'm trying to get data from firebase using axios. I'm using vuex store to handle all my data .

I've this two actions to get the data and store it :

nuxtServerInit(vuexContext, context) {
        return axios
          .get("https://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);
      }

I don't know what is wrong with this code but it gives me this errors :

Maximum call stack size exceeded

errors on terminal

Answer 1

You should put only POJO objects into vuex. Most likely you are putting some heavily nested object into it. E.g. res.data contains some non Pojo object that u are putting into vuex