소개
게시글
질문&답변
vue router 관련한 질문입니다.
저도 같은 질문을 올렸었는데, 답변을 못 찾았다가, 몇 달이 지난 지금 되짚어 보면서 어쩌다 해결해서 제 해결법 공유합니다.우선, 아예 동작하지 않는 현상을 해결하지 않으셨다면, 1. 우선 router 폴더에도 store.js를 생성해야 합니다.2. 틱택토, 지뢰찾기에의 각 store 객체 내용물을 router의 store.js에 혼합해서 입력합니다. (테이블 구조로 둘 사이에 동일한 이름의 변수/함수가 많아서 충돌하지 않게 최대한 다른 이름으로 컴포넌트 및 store.js의 수정이 필요합니다. 혼합은 나중에 하기로 하고, 우선 원하는 게임의 작동을 확인하기 위해 해당 store.js를 붙여넣기 하시는 걸 권장합니다.)3. Router 혹은 GameMatcher 컴포넌트에서 'store' import 및 export.이후, 제 경우엔 실시간으로 테이블 셀 클릭 결과가 업데이트 되지 않는현상이 발생했습니다. 예로, 지뢰찾기 start 후, 다른 게임 route 링크를 클릭 후 다시 지뢰찾기를 클릭해야 테이블 생성 확인 가능했습니다. (새로 고침하면 처음으로 되돌아가므로 업데이트 여부 확인 불가) 일단 추정 원인으로, 1. vue 컴포넌트들 중 Vuex의 store를 사용하는 것에만 문제 발생. 2. Local (해당 게임의 폴더, router 프로젝트 폴더 외부)에서 store 객체를 import/export 하고 있으면서, router 컴포넌트에서도 (혹은 game matcher 컴포넌트) store를 import/export 하여, 중복 기능의 충돌로 추정. 해결 방안으로는,Local 의 import 및 export default의 store 삭제/생략. (mutations 유지)=== (X) import store, { INCREMENT_TIMER, INCREMENT_TIMER2, CODE } from './store'; ... export default { store, components: { TableComponent, MineForm, }, ... (O) import { INCREMENT_TIMER, INCREMENT_TIMER2, CODE } from './store'; ... export default { // store, components: { TableComponent, MineForm, }, === 즉, 정리하자면,1. router 폴더에 원하는 게임의 store.js를 복사/붙여넣기. (다수의 게임에 적용 시, store.js에 혼합. ) 2. 각 게임 폴더의 컴포넌트에서 store를 import/export 하지 않도록 설정. 3. router 혹은 gameMatcher에서 store를 import/export 하도록 설정. 모쪼록 이 방법으로 해결이 되어 도움이 되었으면 좋겠습니다.해결되지 않거나 추가로 궁금한 점이 있으시면 도와 드리겠습니다.
- 0
- 1
- 232
질문&답변
9. 라우터 강의 관련 질문 드립니다.
답변 감사드립니다. 모든 게임은 개별적으로 작동하며, 라우팅 페이지에서는 틱택토와 지뢰찾기만 동작하지 않는 걸로 볼 때 (로또는 동작하여, 다중 컴포넌트 문제x), 또 에러 메시지를 볼 때 (halted 등 읽기 실패), store.js 로딩에 문제가 있는 것 같습니다. Route에 vuex 적용 관련 공부를 더 하도록 하겠습니다.
- 0
- 2
- 223