Vue js 2 - 하위 구성 요소에서 App.vue의 데이터 액세스

Vue js 2 - 하위 구성 요소에서 App.vue의 데이터 액세스

나는 Vue를 처음 접하는 사람이고, 그것을 가지고 첫 앱을 만들려고 노력하고 있다. (하지만 나는 튜토리얼 전체를 통해 일을 해왔기 때문에 완전히 새로운 것은 아니다.나는 Java/Grails 배경에서 왔기 때문에 이 새로운 "프론트 지향 웹 앱"은 여전히 나에게 꽤 혼란스럽다.나는 웹팩과 함께 Vue 2를 사용하고 있다.

내가 가지고 있는 문제는 앱이 App.vue 컴포넌트(루트 컴포넌트가 맞다고 가정하는 것)에 데이터를 생성한 후 하위 컴포넌트의 이 데이터에 액세스하는 방법을 실행하는 것이다.그래서 구체적으로 내가 하고자 하는 것은 '생성된' 라이프 사이클 후크에서 나는 사용자가 로그인했는지 확인하고 그에 따라 내 네비바를 업데이트하고 싶다(로그인 버튼이 없다면, 그렇지 않으면 사용자 이름을 표시하거나, 예를 들어,

나는 사용자가 로그인했는지 정확히 어떻게 판단할지 아직 정확히 파악조차 하지 못했다. 지금까지 앱뷰 컴포넌트에 더미 데이터를 만든 다음 아동 컴포넌트에 접속하려고만 했다.내가 조사한 모든 곳에서 나는 이벤트 버스를 이용해야 한다고 말하지만 (내가 틀렸다면 정정해) 내가 찾을 수 있는 유일한 예는 모든 $emit 기능들이 사용자 이벤트에서 호출되고 있다는 것이고, 나는 그것이 항상 어디에서나 데이터를 전세계적으로 이용할 수 있게 하고 싶다(그리고 돌연변이가 가능하다).

그래서 내가 생각하고 있던 몇 가지 코드를 보여 주겠다.

App.vue:

...stuff...
data() {
  return {
    authToken = '',
    userdetails = {},
    loggedIn = false
  }
},
created: function() {
  // check browser storage for authToken
  if(authToken) {
    // call rest service (through Vue Resource) to Grails backend that I set up 
    // beforehand and set this.userdetails to the data that gets returned  
    if(this.userdetails) {
      this.loggedIn = true;
    }
  }
}
...stuff...

홈.vue:

<template>
  <div class="home">
    <nav-bar></nav-bar>
  </div>
</template>
...stuff

NavBar.vue:

<template>
  <div class="navBar">
    <div v-if="loggedIn">Hi {{ userdetails.name }}</div>
    <div v-else>Please log in before continuing.</div>
  </div>
</template>

만약 그 코드 중 어떤 것이 잘못되어 있다면, 그것은 단지 내가 하려는 것을 어느 정도 보여주기 위한 것이고 나는 그것을 지금 대부분 만들었다.그래서 중요한 질문은 다음과 같다.어떻게 하면 이 문제를 해결할 수 있을까?v-if="loggedIn"그리고{{ userdetails.name }}(분명히 지금 설정된 방식대로 작동하지 않을 것이다, 그렇지?)그리고 그 외에도, "글로벌 변수"와 Vue js의 데이터 흐름에 대한 어떤 일반적인 조언도 감사할 것이다. 왜냐하면 나는 나의 서버측 앱 사고방식이 프런트 엔드 자바스크립트 앱에서 작동하지 않을 수도 있다고 생각한다.

상위 구성 요소에서 데이터를 가져오려면this.$parent.userdetails하위 구성 요소에서

그러나 훨씬 더 좋은 방법은 이런 소품을 사용하는 것이다.

https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props

Lite 패턴, 복잡한 공유 작업 제외

다음 필드로 어디서나 글로벌 앱 구성 요소(루트, 구성 요소, 중첩 구성 요소)에 액세스할 수 있음:

this.$root

과대평가자에 대한 참고 사항:그것은 vue 가이드 http://vuejs.org/v2/guide/state-management.html에서 공식적으로 "Lite" 접근법으로 제안된다.

분명히, 그것은 건축 패턴화된 해결책은 아니지만, 변수 한두 개를 공유해도 괜찮다.

이러한 경우, 이러한 희박한 접근방식은 개발자가 단지 그러한 사소한 공유 작업만을 위해 vuex, 대량 개발, 노하우 요구 사항 및 페이지 다운로드와 같은 완전한 공유 프레임워크를 가져오지 못하게 한다.

만약 여러분이 라이트 접근법을 싫어한다면, 심지어 전용되고 공식적으로 제안되었을 때에도, 문제를 어떻게 공유할 것인가가 아니라, 어떤 틀을 사용해야 할 것인가에 대한 것일 수도 있다.

예를 들어, 각도는 아마도 중공학적 접근방식에 가장 적합할 것이다. 내 말은 다른 접근방식에 가장 적합하다는 것이 아니라, 다른 작업과 접근방식에 가장 적합한 다른 기기들을 말하는 것이 아니라, 더 무겁고 복잡한 해결책을 실현해야 할 때 그것을 사용한다는 것이다. 이 경우 vuex에서도 나는 모든 요소들의 상호작용을 처리할 수 없었다.실시간 데이터 공유

다음 방법은 다른 개발자나 vue 자체에서 추천하지 않는다.

this.$root;

또는

this.$parent.userdetails

내 생각에 구성 요소 간에 데이터를 공유하는 가장 좋은 방법은 vuex 상태 관리를 사용하는 것이다.

다음은 공식 문서 링크: https://vuex.vuejs.org/#what-is-a-state-a-state-management-pattern

참조URL: https://stackoverflow.com/questions/45236714/vue-js-2-accessing-data-in-app-vue-from-child-components