동적으로 url의 boardId가 변경됨에 따라 데이터 fetch해오기

[yejineee]

동적으로 url의 boardId가 변경됨에 따라 데이터 fetch해오기

현재 보드 페이지의 url은 boards/:boardId이다.
이 라우트로 들어올 때, boardId에 맞는 칼럼들을 fetch해오게 된다.

네비게이션 후에 data fetch하는 방식이 UX적으로 더 좋을 것 같다고 생각하였다.
따라서 인스턴스가 만들어지고 호출되는 created 라이프사이클 훅에서 데이터를 Fetch해왔다.

  created() {
    this.fetchColumnsByBoardId();
  },

뷰는 라우트가 동일할 때는 처음 인스턴스가 만들어졌을 때의 인스턴스를 재사용한다고 한다.
즉, params인 boardId를 수정하여도, 라우트는 동일하기에 인스턴스를 재사용한다.
이는 라이프사이클 훅인 created가 호출되지 않는다는 뜻이다.

따라서 url에서 params인 boardId를 변경함에 따라 데이터를 새롭게 fetch하기 위해서는

1. $route 객체를 watch - navigation 후 data Fetch
2. beforeRouteUpdate 사용하기 - navigation 전 data Fetch
   두 방법을 사용해야 한다.

앞서 말했다시피, 나는 네비게이션 후, 데이터를 fetch해오는 방식을 사용하였으므로
$route 객체의 변화를 감지하기는 방식을 사용했다.

이 때 이동하고자 하는 라우트의 boardId를 알아야 했다.
이 정보는 Route 객체의 params로 알 수 있었다.
이동하고자 하는 라우트는 watch의 $route의 첫 번째 인자로 받아올 수 있었다.

  watch: {
    $route(to, from) {
      this.fetchColumnsByBoardId(to);
    }
  },

---

중복되는 일 함수로 분리하기

처음 데이터를 fetch하거나, 라우트가 변경되어 다시 데이터를 fetch하는 경우의 작업은 동일하다.

1. 현재 라우트의 params에서 boardId를 가져온다.
2. vuex에서 data를 fetch하는 액션을 dispatch한다.

위의 작업을 해주는 함수를 만들어서 중복을 줄일 수 있었다.
인자는 Route 객체를 받아왔다.

  methods: {
    ...mapActions(COLUMN_STORE_NAME, { fetchColumns: FETCH_COLUMNS }),
    fetchColumnsByBoardId(route = this.$route) {
      const { boardId } = route.params;
      this.fetchColumns({ boardId });
    }
  }

참고

• The Route Object - vue-router
• Data Fetching - vue-router
• Dynamic Route Matching - vue-router