URL에서 라우팅 할 때 Vue에 저장할 데이터로드가 작동하지 않음 (버튼을 클릭 할 때 작동)

Question

다소 어색한 문언이 나올 경우 죄송합니다. 나는 그것을 완벽하게 표현할 수있는 방법을 조금 불확실하게 여깁니다.

링크를 클릭하면 저장소에 데이터가로드됩니다 (저장소에 대한 명령을 전달하고 상태 변수에로드해야하는 데이터의 종류를 알려주는) 메뉴 시스템이 있습니다.

menuClick: function(event) { 
    const dataKind = event.target.id; 
    this.$store.dispatch("updateData", { type: dataKind }); 
} 

또한 이와 같은 라우터가 있습니다.

import Thing1 from "./thing1.vue"; 
export const routes = [ 
    ..., 
    { path: "/stuff/thing1", component: Thing1 } 
]; 

이 설정은 효과가 있으며 만족 스럽습니다. 또는, 은이었습니다. 동료가 URL에 간단히 입력하면 (링크를 추가하거나 링크를 클릭하면 메뉴 항목의 실제 클릭을 제외한) URL을 입력하는 것이 트릭을하지 않는다는 사실이 밝혀지기 전까지는 만족합니다. 페이지는 가정 된대로 렌더링되지만 데이터가로드되지 않으므로 바나나가없는 메시지 만 표시됩니다 ....

어떻게 해결할 수 있습니까?

내가 생각하고있는 한 가지 접근 방법은 라우팅 이벤트에 대한 업데이트 요청 디스패치를 ​​연결하는 것뿐 아니라 메뉴를 클릭 할 때도 마찬가지입니다. 문제는 내가 기술적으로 어떻게 말을해야할지 모른다. 전혀 가능합니까?

두 번째 방법은 메뉴의 클릭 (또는 적어도 클릭 할 때)이 아니라 나중에 단계에서 데이터를로드하는 것입니다. 이 접근법의 문제점은 어디서 업데이트를 배치해야할지 모르겠다는 것입니다. 좋은 자리가 무엇이겠습니까?

다른 방법이 있습니까?

Answer 1

일부 데이터를 초기화해야 할 경우 beforeMount 또는 기타 Lifecycle Hooks을 사용할 수 있습니다. 저장소의 데이터를 업데이트하고 initialising 및 menuClick에서 동일한 메서드를 호출하는 메서드를 사용할 수 있습니다.

구조는 다음과 같이한다 :

export default { 
    components: { }, 
    data() { 
    return { 
    } 
    }, 
    methods: { 
    updateStore (value) { 
     this.$store.dispatch("updateData", { type: value }) 
    }, 
    menuClick: function(event) { 
     const dataKind = event.target.id 
     this.updateStore(dataKind) 
    } 
    }, 
    beforeMount() { 
    if(this.$route.dataKind && someOtherConditionIfNeeded){ 
     this.getDetails(this.$route.dataKind) 
    } 
    } 
} 
</script> 

Answer 2

난 당신이 경로를 매개 변수로 해당 ID를 설정해야한다고 생각하고 구성 요소로, 당신이 경로를 볼 수 있으며, 경로가 활성화 될 때 데이터가 수집 될 것이다. (https://router.vuejs.org/en/advanced/data-fetching.html)

내 repo의 예가 https://github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/views/PostView.vue#L56입니다. VueJS 1.x에서 사용자의

는 조금 다른 data와 방법 및 route 객체는 구성 요소에로드 데이터를 처리하지 않은 이유는

route: { 
    data ({ to }) { 
     // Triggering method, and sending route params 
    } 
}