[vue.js] e-commerce(쇼핑몰) 기반으로 만들어보는 router 정리

서론

데이터 입력하는 화면에서 불러오기하여 가져온 데이터를 set 해달라는 요청이 있어서 개발을 시작하였습니다. 그런데 입력하는 화면에서 사용하는 obejct와 불러오기하여 가져온 object가 달라서 그대로 set할 수 없었습니다. 그래서 기준 object에 존재하는 속성 값만 set 하는 방법을 적어놓았습니다.

데이터

// 기준 데이터
const a = {
	test : 'test',
	test1: '',
	test2: '2'
}

//조회한 데이터
const b = {
    test1: '11',
    test2: '22'
    test3: '33'
}

//원하는 데이터
const a = {
    test: 'test', // b에 key가 없으므로 유지
    test1: '11' // a가 빈값이고 b에 존재하므로 set
    test2: '2' // 기존 데이터가 있으므로 유지
}

 

확인 사항

1. 기준으로 만든 object는 추후 api를 호출하기 위해 만든 obejct이므로 추가하지 않는다. 

2. 조회한 데이터 object는 기준 object와 key가 다르므로 기준 object에 있는 key의 value값만 set한다.

3. 기준 데이터를 화면에서 set한 데이터가 있다면 변경하지 않는다.

소스

<template>
  <div class="about">
    <h1>This is an about page</h1>
    test
    <input class="int" v-model="a.test" />
    test1
    <input class="int" v-model="a.test1" />
    test2
    <input class="int" v-model="a.test2" />
    <button type="button" class="btn_type btn_primary" @click="getData">
      <span>데이터 불러오기</span>
    </button>

    불러온 데이터 : {{ b }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: {
        test: "",
        test1: "",
        test2: "",
      },
      b: null,
    };
  },
  computed: {},
  created() {},
  methods: {
    getData() {
      //api 호출 이후 조회한 데이터
      this.b = {
        test1: "11",
        test2: "22",
        test3: "33",
      };

      let dataArr = Object.entries(this.b).reduce((acc, [key, value]) => {
        // 조회한 데이터 빈값 체크
        if (value) {
          for (let item of Object.entries(this.a)) {
            // 기준 object에 있는 key 인지 체크 및 기준 데이터 빈값 체크하여 데이터 set
            if (item[0] === key && !item[1]) acc.push([key, value]);
          }
          return acc;
        }
      }, []);

      this.a = { ...this.a, ...Object.fromEntries(dataArr) };
    },
  },
};
</script>

 

getData 설명

1.  조회한 데이터 b를 object.entries 하여 배열로 반환

2. 배열 데이터를 key, value 별로 reduce

3. 조회한 데이터 빈값 체크

4. 기준 데이터 a를 object.entries 하여 배열로 반환

5. 배열 데이터 for문

6. 기준 데이터 key와 reduce 키와 동일 여부 체크 및 기준 데이터 빈값 체크 하여 빈값이 없을시 기준 데이터에 조회한 데이터를 push

7. 기준 데이터에 기존의 기준 데이터와 reduce로 생성한 배열 데이터를 object로 치환하여 합치기

 

 

 

 

https://v3.router.vuejs.org/kr/guide/essentials/navigation.html

 

처음 프로젝트 생성 :

 

기본 라우터 구성

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
]

home을 main으로 잡고 상품목록 페이지 생성 및 router 선언

  {
    path: '/prdList',
    name: 'prdList',
    component: '../views/PrdList.vue'
  },

메인에서 상품목록 이동 버튼 및 메소드 설정

<template>
  <div>
    <h1>메인화면</h1>
    <v-btn @click="goPrdList">상품목록 이동</v-btn>
  </div>
</template>

<script>
  

  export default {
    name: 'Home',

    methods:{
      goPrdList(){
        this.$router.push('prdList');
      }
    }
  }
</script>