[Udemy Vue 완벽가이드 Section16] 240. Vuex 및 코치 데이터 추가하기

데이터 추가를 시작해보자.

데이터 관리는 당연히 Vuex를 사용할 예정.

절대 변하지 않을 정적인 데이터뿐만 아니라 코치를 추가할 수 있어야 하므로.

 

pages, components 폴더 옆에 store폴더를 만들고,

index.js파일을 추가해 이 파일에 저장소를 설정한다.

하지만 모듈로도 작업할 거다.

코치와 요청이라는 두 개의 주요 기능이 있고, 각 기능 그리고 기능에 속하는 state, action을 모듈로 만들 예정.

 

한 파일에 전체 모듈을 넣을 수도 있고, 여러 개의 파일로 나누어도 된다.

이번에는 여러 개의 파일에 모듈을 나누어서 넣는 방식으로 해보자.

불필요한 작업일 수도 있다. 반드시 이렇게 하지 않아도 된다.

//store>index.js
import { createStore } from 'vuex';
import coachesModule from './module/coaches/index.js';
import requestsModule from './module/requests/index.js';

const store = createStore({
  modules: {
    coaches: coachesModule,
    requests: requestsModule,
  },
  state() {
    return {};
  },
  getters: {},
});

export default store;

 

index.js를 불러온다.

왜냐하면 이 중첩 index.js 파일에 전체 모듈이 설정되어있고, 모듈의 mutations, action, getter, state가 포함되어 있기 때문.

modules에서 key는 네임스페이스를 사용할 것이므로 중요하다.

 

state는 코치목록을 인식할 수 있어야한다.

일단 처음에는 더미 데이터로 시작해보자.

 

state를 get으로 가져올 수 있는 getters가 필요하다.

컴포넌트 내에서 state로 직접 접근이 가능하긴 하지만, getter를 사용하는 편이 항상 권장되고,

그래서 이 getters 파일을 보자.

 

두 번째 getter도 추가할 수 있다. 바로 hasCoaches게터.

이후에 CoachesList 컴포넌트에 코치가 있는 경우에만 목록을 렌더링할 것이므로.

 

코치가 전혀 없는 경우가 생기는데 실제 데이터를 사용할 경우, 코치를 추가하지 않는 이상 코치가 존재하지 않을 것이고, 그런 경우에 생길 빈 목록은 화면에 표시되지 않았으면 해서.

→ 대신 '코치가 존재하지 않음' 등의 메시지를 표시한다.

즉, 코치가 존재하는지의 여부를 확인하게끔 지정하자. 그리고 true / false를 반환한다.

 

따라서 확인한 결과를 반환하기 위해서 if조건문으로 state.coaches를 확인하는데 

코치가 적어도 한명은 있다는 의미이므로 true를 반환. 그 외의 경우에는 false를 반환.

//coaches>getters.js
export default {
  coaches(state) {
    return state.coaches;
  },
  hasCoaches(state) {
    return state.coaches && state.coaches.length > 0;
  },
  isCoach(_, getters, _2, rootGetters) {
    const coaches = getters.coaches;
    const userId = rootGetters.userId;
    return coaches.some((coach) => coach.id === userId);
  },
};

 

 

main.js에 app.use(store)를 했다.

이제 Vuex 저장소가 Vue앱의 일부가 되었다.

import { createApp } from 'vue';

import router from './router.js';
import App from './App.vue';
import store from './store/index.js';

const app = createApp(App);

app.use(router);
app.use(store);

app.mount('#app');

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.