게시물이 로드가 안 되는것 같아요
423
投稿した質問数 33
몇 번을 돌려봐도 맞게 했는데 게시물이 로드가 안되네요..
로그인 전 홈 화면에서도 아무것도 없고,
로그인 후 홈 화면에서도 아무것도 없습니다.
하지만
게시글 등록하고 밑에 게시물이 눈에 보이는데
새로고침하면 게시물은 사라집니다.
DB에는 등록이 잘 되구요
프론트에서 loadPosts를 불러오지 못하는 것 같아
제로초님 깃허브를 참고하려 했으나 그 파일이 최종본이라
차이가 많이나서 어느 부분을 참고해야할지 모르겠네요
Vue devtools로 봐도 loadPosts를 부르지도 않더라구요
어느 부분을 건드려야할지 감이 안 잡혀서 질문드립니다...
-----------------------------------------------------
front/store/posts.js/mutations
loadPosts(state, payload) { // 게시글 불러오기
state.mainPosts = state.mainPosts.concat(payload.data);
state.hasMorePost = payload.length === limit;
},
-----------------------------------------------------
front/store/posts.js/actions
loadPosts({ commit, state }, payload ) {
if(state.hasMorePost) {
this.$axios.get(`/posts?offset=${state.mainPosts.length}&limit=10`)
.then((res) => {
commit('loadPosts', res.data);
})
.catch((err) => {
console.error(err);
});
}
},
-----------------------------------------------------
back/routes/posts.js
const express = require('express');
const db = require('../models');
const router = express.Router();
router.get('/', async (req, res, next) => { // 게시글 여러개
try {
const posts = await db.Post.findAll({
include: [{
// 게시글 작성자의 아이디와 닉네임
model: db.User,
attributes: ['id', 'nickname'],
}, {
// 게시글 이미지
model: db.Image,
}, {
// 좋아요 누른 사람 목록 중 아이디
model: db.User,
as: 'Likers',
attributes: ['id'],
}, {
// 리트윗한 원본 정보: 작성자의 아이디와 닉네임
model: db.Post,
as: 'Retweet',
include: [{
model: db.User,
attributes: ['id', 'nickname'],
}, {
// 리트윗한 원본 이미지
model: db.Image,
}],
}],
order: [['createdAt', 'DESC']],
offset: parseInt(req.query.offset, 10) || 0,
limit: parseInt(req.query.limit, 10) || 10,
});
res.json(posts);
} catch (err) {
console.error(err);
next(err);
}
});
module.exports = router;
-----------------------------------------------------
vue-nodebird의 posts 테이블

-----------------------------------------------------
로그인 전 홈 화면

----------------------------------------------------
로그인 후 홈 화면

-----------------------------------------------------
게시글 작성 후 화면

-----------------------------------------------------
게시글 작성 후 새로고침한 화면

回答 6
4
front/store/posts.js/actions
loadPosts({ commit, state }, payload ) {
if(state.hasMorePost) {
this.$axios.get(`/posts?offset=${state.mainPosts.length}&limit=10`)
.then((res) => {
commit('loadPosts', res.data);
})
.catch((err) => {
console.error(err);
});
}
},
이 부분을 저는 이렇게 바꾸니까 되던데요. 확실한건지는 모르겠지만;;
async loadPosts({ commit, state }, payload) {
if(state.hasMorePost) {
try {
const res = await this.$axios.get(`/posts?offset=${state.mainPosts.length}&limit=10`);
commit('loadPosts', res.data);
} catch (err) {
console.error(err);
}
}
},
0
제가 봤을 때는 코드 상에 문제를 찾기가 힘듭니다. 제 깃헙 코드랑 차이점을 보셔야 할 것 같습니다. 지금 git 세팅이 되어있으니 차이점을 쉽게 찾으실 수 있을 것입니다.
0
front/pages/index.vue
fetch({ store }) { // 컴포넌트가 화면에 보여주기 전에
console.log('pages/index/fetch');
return store.dispatch('posts/loadPosts');
},
위 코드에서 로그는 찍힙니다.
지금 loadPosts mutations랑 actions에서 로그 다 찍어봤는데 함수는 실행이 되는 것 같습니다.
res.data도 콘솔창에 잘 나오구여
아니면 제가 계속 깃에 업데이트를 했는데 한 번 봐주실 수 있으신가요?
https://github.com/qnrjs42/vue_nodebird/tree/master/ch5
현재 수강 진행도는 5-9까지 입니다.
0
front/store/posts.js/actions
여기서 loadPost에서 console.log(res.data) 해보시고요.
loadPosts 자체를 dispatch하지 않는다면
| fetch({ store }) { | |
| return store.dispatch('posts/loadPosts'); | |
|
}, 이 부분에 콘솔을 넣어서 이 부분이 실행되는지 확인해보세요. |
npm run dev 할 때 에러가 발생합니다.
0
143
1
해당 강의는 리뉴얼 예정은 따로 없나요?
0
326
1
강의는 언제까지 업데이트 된 내용인가요?
0
328
2
실습 환경 문의(Node 버전)
0
363
1
로그인 새로고침시 풀림
0
289
1
안녕하세요! 로그인 유지 질문 드립니다!
0
401
1
웹 서버 관련해서 질문드립니다.
0
439
1
버전때매 질문 드립니다!!
0
311
1
이 강의는 vue3는 아닌가요??
0
370
1
vsCode에 관한 질문입니다
0
487
1
v.trim()이 타입에러가 뜹니다...
0
341
1
express.static('uploads')
0
341
2
STRING이 인식이 안되는데 이유알수있을까요?
0
444
2
<v-lsit-item-title> 에러
0
407
2
vue cli 를 실무에서도 사용하지 않으시나요?
0
317
1
선생님 처음 환경 셋팅 관련 문의드립니다.
0
383
1
nuxtServerInit 무한 로딩
0
971
3
Nginx Cookie 설정
0
720
2
상태가 204번인경우에는 어떻게 처리를 해야하나요?
0
290
1
선생님 nuxt 관련질문드립니다.
0
347
1
인덱스 비교로 삭제해도 될까요?
0
380
1
질문 드립니다!
0
327
2
안녕하세요
0
223
1
궁금한점이있습니다
0
233
1

