Vue(13) 동적라우팅으로 상세페이지 vuex 로 구현하기

메뉴들을 클릭할 때, 라우터를 통해 각각의 컴포넌트 상세페이지로 넘어가는 것이 아니라

컴포넌트 없이 동적라우팅을 통해 상세 페이지로 넘어가는 기능을 구현해보자.

 

 

 

---

Vue(14) 동적라우팅으로 상세페이지 vuex 로 구현하기

src/api/index.js

일단 Api를 불러와 상세페이지를 보여줄 통신 메소드를 정의해보자.

import axios from "axios";

function showMenuDetailApi(menuid) { // 매개변수로 menuId를 받는다.
  const BASE_URL = `http://________/menu/${menuid}`;
  return axios.get(BASE_URL);
}

export { showMenuDetailApi };

 

---

src/router/index.js

통신 메소드 정의했으니 라우터에서 동적으로 라우팅을 할 수 있게 셋업 좀 해줍시다.

import Vue from "vue";
import VueRouter from "vue-router";
import MenuPage from "@/views/MenuPage.vue";

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",	      // 이걸해줘야 URL 에 #이 안뜬다.
  routes: [
    {
      path: "/menu/:menuId",  // :menuId 이게 동적으로 바뀔 경로를 의미한다.
      component: MenuPage,    // api를 통해 동적으로 바뀌는 내용이 들어갈 컴포넌트이다.
    },
  ],
});

 

 

---

App.vue

HTML

v-for 태그를 통해 api 객체의 메뉴정보를 몽땅 가져오자.

<router-link> 태그 안에 동적인 정보를 담은 path와 params를 바인딩 시켜주자.

<div					// v-for문을 통해 api 객체 안의 title을 전부 가져온다.
  v-for="(item, idx) in menu"
  :key="`ct-menu-${idx}`"
  class="menu_title_area"
>
  <router-link					
    v-bind:to="{
    path: `/menu/${item.id}`,		// url 맨 끝에 나타날 동적 경로 ex) /menu/product1
    params: { index: `${item.id}` }, 	// 하위 컴포넌트로 넘길 params 값
    }"
  >
  	{{ item.title }}
  </router-link>
</div>

 

 

---

views/MenuPage.vue

HTML

상세페이지의 상세내용을 표시해주자

<div>Menu Page</div>
<div class="sub_title">{{ menuInfo.title }}</div> // 상세페이지 title 
<div>{{ menuInfo.content }}</div>		  // 상세페이지 contents

 

JavaScript

1. menuId 를 App.vue 에 있는 동적라우터 param 안의 menuId로 설정한다.

2. store에 접근해 dispatch() 을 통해 "FETCH_MENU" 라는 메소드를 action에 보낸다. 그럼 action으로 가보자.

<script>
export default {
  created() {
    const menuId = this.$route.params.menuId;   // App.vue 에 라우터의 param.menuId 값
    this.$store.dispatch("FETCH_MENU", menuId); // action 에 접근
  },
  computed: {
    menuInfo() {	
      return this.$store.state.id; 		// store의 state.id 에 직접 접근한다.
    },
  },
};
</script>

 

---

src/store/index.js

action 에서는 컴포넌트(View)의 변화를 제일 먼저 알게된다. 통신 메소드를 데려와서 api 데이터를 가져온다. 

(api 를 불러달라니 불러만 드리리다. )  근데 다 해주는 건 아니다. 데이터만 가져오기만하고 mutation 으로 넘겨버린다.

mutation 은 데이터를 넘겨받아 프로젝트 내에서 사용할 state(상태변수) 안에 넣어준다.

이제 api 데이터는 상태변수 안에 담겨서 프로젝트 내에서 자유롭게 사용할 수 있게 된다.

import Vue from "vue";
import Vuex from "vuex";
import { showMenuDetailApi } from "@/api/index.js";  // 통신 메소드 임포트하기

Vue.use(Vuex);

export default new Vuex.Store({
  namespaced: false,
  state: {
    id: {},  			// state에서 globally 사용할 id 값을 정의
  },
  actions: {
    FETCH_MENU(context, id) { 	// MenuPage.vue 에서 호출되어
      showMenuDetailApi(id)     // 통신 메소드가 실행된다.
        .then((response) => {	// 응답 받으면,
          context.commit("SET_MENU", response.data); // api의 response.data 가 넘어가며 mutation의 SET_MENU 가 실행
        })
        .catch((error) => console.log(error));
    },
  },
  mutations: {
    SET_MENU(state, id) { // 위에서 넘어온 정보를 인자로 받아서 
      state.id = id;	  // state.id에 api의 id 값을 넣어줌
    },
  },
});