#firebase #vue.js #axios #nuxt.js
# #firebase #vue.js #аксиос #nuxt.js
Вопрос:
Я хочу получить данные из базы данных firebase в реальном времени перед рендерингом страницы, я использую хранилище vuex для обработки всех моих данных.
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"}}
Комментарии:
1. пожалуйста, создайте воспроизведение в codesandbox
Ответ №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);
}
}
И это сработало отлично — прикрепляю скриншот моего экрана
Комментарии:
1. можете ли вы дать мне полный код store/index.js ?
2. и куда вам импортировать axios?
3. @AymanTarig , приведенный выше код такой же! Вы использовали — this.axios, а я использовал this.$ axios. Настройте axios, как описано здесь — axios.nuxtjs.org/setup
4. Я использовал ту же настройку, что и в указанном вами URL, но я все еще получаю ту же ошибку. вы можете проверить мой store/index.js и nuxt.config.js файлы по этой ссылке github.com/Ayman-Tarig/nuxt-errors и скажи мне, что в них не так
5. Я использую nuxtjs версии 2.6.2