기존 사이드 메뉴 작업 시 vuex 기반의 헬퍼 함수 mapState를 이용하여 작업해주었다.
그런데 임의의 api 데이터 등록 시 store에서 state라는 변수명으로 정의했기 때문에
mapState가 state를 api 데이터로 인식하여 sidemenu가 작동하지 않았다.
mapState
Vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼
해결 과정(store 폴더 구조 수정 및 state 사용)
store 폴더 구조 수정
store 폴더 내에 state 폴더 안에 test.js 파일을 만들어 해당 api 데이터에 관련된 함수를 정의해주고
state 폴더 안에 index.js 파일에서 모든 state함수들을 ...이라는 Object Spread Operator에 등록하고
이를 store 안에 index.js에서 import해서 사용하는 구조로 바꾸었다.
state 사용
(home.vue 적용)
그리고 state 폴더 내에 정의한 state들을 사용하기 위해서는 간단히 computed 안에 위 그림과 같이
등록하여 사용해주면 된다
2주차 Issue 1. 상태 관리 관련 오류 수정
오류 원인
기존 사이드 메뉴 작업 시 vuex 기반의 헬퍼 함수 mapState를 이용하여 작업해주었다. 그런데 임의의 api 데이터 등록 시 store에서 state라는 변수명으로 정의했기 때문에 mapState가 state를 api 데이터로 인식하여 sidemenu가 작동하지 않았다.
해결 과정(store 폴더 구조 수정 및 state 사용)