웹 서비스에 대한 자세한 내용은 여기를 참조하십시오. 「 레퍼런스 협동 데이터베이스의 기사를 무작위로 표시하는 WEB 서비스를 vue.js에서 만들었습니다. 」

했던 일

원래는 톱 페이지 1장 모두(상하의 header와 footer는 제외한다) Home.vue라고 하는 1개의 컴퍼넌트로 작성하고 있었습니다. 이 외에도 기사 상세 화면용의 Detail.vue가 있습니다.


이번에 한 것은 Home.vue에서 기능마다 A·B·C, 총 3개의 컴포넌트로 분리하는 것입니다.


상단에서 사용했던 Home.vue는 647 줄에서 210 줄로 줄었습니다.

힘들었던 것.

가장 시간이 걸린 A. 검색 기능의 분할에 대해서 비망록도 겸해 씁니다. (※ 아직 지식이 얕은 곳이 많기 때문에, 실수도 있을지도 모릅니다. 눈치채는 점 있으시면 코멘트 받을 수 있으면 고맙습니다.)

검색 기능은 3가지가 있습니다.
1. 검색 상자
이 기사에서는 깊게는 돌진하지 않습니다. 직접 입력 or 상단 추천의 클릭 → 검색 박스에 입력의 2 패턴 있습니다.
2. 무작위로 표시 버튼
이 기사에서는 깊게는 돌진하지 않습니다.
3. 기사 상세 화면의 키워드 태그를 클릭하여 전환
이것이 문제입니다.

1은 검색 박스 에리어의 watch에 의한 감시로 2패턴과도 대처. 2의 랜덤 표시 버튼도 부모 컴퍼넌트가 동일하기 때문에 검색의 실행은 간단.
그러나 3은 다른 화면에서의 전환입니다.

기사 상세 화면이 keyword를 파라미터로서 던져 ⇒수신⇒검색을 실행, 라고 3개의 컴퍼넌트를 넘는 처리입니다. 검색 박스에 키워드를 반영하는 것은 1과 같기 때문에, 마찬가지로 검색 박스의 감시에서는 잘 된다고 생각하고 있으면 검색 실행의 가부 결정으로 조금 막혔습니다.

우선, 파라미터로서 던져 ⇒받는 곳까지는 이하의 실장.

링크 소스 태그.

<a v-bind:href="'https://testreftika.web.app/keyword/' + keyword">{{keyword}}</a>

라우터

router.js

routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/keyword/:keyword',    ←新たに追加
      name:'keyword',
      component: Home
    },
    省略
}

링크처에서는 url의 체크를 실시해/keyword/와 매치했을 경우는 파라미터를 취득해, 검색 박스에 입력합니다.

    if (location.pathname.match(/\/keyword\/./)) {
      this.keyword = this.$route.params.keyword
    }

그런 다음 A 구성 요소에서 검색을 수행합니다.

여기서 처음에는 "created : function의 처리로서 키워드가있는 경우 검색을 실행"이라는 방법을 취했습니다. 그러나, 뒤로 버튼으로 톱 페이지로 천이해 왔을 때에도 검색을 실행해 버리기 때문에 좋지 않습니다.

그래서 또 다른 방법은 B 컴포넌트에 대한 검색 결과 데이터가 있는지 여부에 따라 결정하기로 결정했습니다. 그 때문에, 원래 컴퍼넌트의 data로 관리하고 있던 검색 결과를 store로 이동. 컴퍼넌트의 data는 버퍼로서 이용하기로 했습니다.



이렇게 하면 키워드의 유무가 아니라 store에 데이터가 있는지 여부에 따라 검색을 실행할지 여부를 결정할 수 있습니다. store는 page 리프레시시와 url이 바뀌었을 때에 사라져 버리므로, 상세 페이지로부터의 천이시에는 새롭게 검색을 실행해 주기 때문입니다. (라고 이해합니다.)