돌연변이 후 경로 변경(VueRouter) 모범 사례(Vuex)

돌연변이 후 경로 변경(VueRouter) 모범 사례(Vuex)

많이 찾아봤지만 거기에 대한 명확한 답변이 없다.기본적으로 돌연변이 후 자동으로 경로를 변경하는 최선의 방법은 무엇인가?

Ex: 버튼을 클릭하여 로그인() -> http 호출 -> 돌연변이 LOGIN_SUCUPT -> 사용자를 메인 페이지로 리디렉션$router.go()

• 액션을 약속으로 포장한 다음 결과를 듣고 구성 요소에서 경로 변경을 호출해야 하는가?

• 앞으로 직접 할까?$store?

• 한다vuex-router-sync어떤 식으로든 도움이 될까?

정말 고마워.

이 질문에 대한 답은 부에 커뮤니티에서 다소 불분명해 보인다.

(나를 포함한) 대부분의 사람들은 가게 변이가 가게의 변이를 실제로 변이시키는 것 외에 어떠한 영향도 가져서는 안 된다고 말할 것이다.따라서, 경로 변경을 직접 수행하는 것은$store피해야 한다.

나는 너의 첫 번째 제안으로 가는 것을 매우 즐겼다: 약속으로 행동을 마무리하는 것, 그리고 약속이 해결되는 즉시 당신의 구성 요소와 함께 하는 것에서 경로를 바꾸는 것.

세 번째 해결책은watch구성 요소에서, 경로 변경 즉시LOGGED_IN_USER주(또는 당신이 뭐라고 부르든)가 바뀌었다.이 접근방식은 당신의 행동과 돌연변이를 100% 깨끗하게 유지시켜주지만, 나는 그것이 매우 빠르게 지저분해짐을 발견했다.

결과적으로, 나는 약속의 길을 가자고 제안할 것이다.

앱에 이벤트 수신기를 추가하십시오.그러면 vue 파일은 당신의 돌연변이 함수에 의해 이벤트에서 방출된다.하지만 약속으로 행동을 포장하는 것이 좋은 방법이라고 제안한다.

App.vue:

import EventBus from './eventBus';

 methods: {   
    redirectURL(path) {
      this.$router.go(path)}
    },

 created() {
  EventBus.$on('redirect', this.redirectURL)
 }

돌연변이:

import EventBus from './eventBus';

LOGIN_SUCCESSFUL() {
  state.blabla = "blabla";
  EventBus.$emit('redirect', '/dashboard')

}

현재(2018년 중반) Vuex API는 구독을 지원한다.이를 사용하면 돌연변이가 스토어를 변경할 때 알림을 받고 필요에 따라 라우터를 조정할 수 있다.

다음 예제는 다음에서 발췌한 것이다.created()Vue 구성 요소의 수명 주기 후크원하는 기준의 첫 번째 일치를 기다리는 점포의 변종을 구독해 구독을 취소하고 경로를 조정한다.

{
  ...
  created: function() {
    const unsubscribe = this.$store.subscribe( ( mutation, state ) => {
      if ( mutation.type === "name-of-your-mutation" && state.yourInfo === desiredValue ) {
        unsubscribe();
        this.$router.push( { name: "name-of-your-new-route" } );
      }
    } );
  },
  ...
}

참조URL: https://stackoverflow.com/questions/41880446/best-practice-to-change-the-route-vuerouter-after-a-mutation-vuex