Vue js 스터디

Vue js를 공부합시다!

Index

Vue 인스턴스

Vue 컴포넌트

Vuex Store

Reference

• https://joshua1988.github.io/vue-camp/
• https://learnvue.co/2020/01/12-vuejs-best-practices-for-pro-developers/

Trouble Shooting

vue Router

Router beforeRouteUpdate

동일한 route에 params만 바뀌는 router 전환이 있을때 리렌더링이 안되는 문제가 있었다.

ex) /project/1 => /project/2로 전환시

export default {
  components: { ProjectContainer },
  methods: {
    ...mapActions(["fetchCurrentProject"]),
  },
  computed: mapGetters(["currentProject"]),
  created() {
    this.fetchCurrentProject(this.$route.params.projectId);
  },
};

해당 컴포넌트의 created()는 한번만 일어나고 이 lifecycle에서만 fetch가 일어났다. 전환시에는 fetch가 다시 되어야 하는데 created()에만 걸려있기 때문에 되지 않은 것.

beforeRouteUpdate(to, from, next) {
    this.fetchCurrentProject(to.params.projectId);
  },

해결 : router의 lifecycle에 beforeRouteUpdate라는 게 있었다. 이를 활용해서 route가 update가 있을때마다 fetch를 해주는 로직을 추가했다.

• https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

v-if

V-if

store의 getter로 받아온 data가 초기상태가 undefined 인 경우 console에 error가 났다.

ex) cannot find id of undefined

데이터를 사용하는 v-if로 해당 getter를 적어주면 error가 사라졌다.