Vuejs 2는 이벤트 버스로부터 수신된 데이터를 사용하여 변수에 데이터를 할당합니다.

Vuejs 2는 이벤트 버스로부터 수신된 데이터를 사용하여 변수에 데이터를 할당합니다.

작은 클라이언트 측 Vuejs 애플리케이션을 만들고 있는데 변수에 데이터를 할당하는 데 문제가 있습니다.로그인 컴포넌트에서는 eventBus로 사용자 데이터를 내보내고 인덱스 컴포넌트에서는 eventbus에서 데이터를 수신합니다.mounted: function ()데이터 수신에는 문제가 없습니다만, 이 수신한 데이터를 R&D에 할당하고 싶습니다.currentUser변수.이게 내가 가지고 있는 거야index component:

mounted: function () {
    eventBus.$on('thisEvent', function (userObject) {
        console.log('event received!', userObject)
        this.currentUser = userObject.user
        console.log('The user: ', this.currentUser) // Shows correct new user data
    }.bind(this))
    console.log('User outside eventbus:', this.currentUser) // Shows empty user
}

데이터에서의 사용자의 모습은 다음과 같습니다.

data: function () {
  return {
     currentUser: {
     firstname: '',
     lastname: '',
     last_login: ''
    }
  }
}

currentUser가 이벤트버스 외부에서 비워지는 이유를 알 수 없습니다.잘 부탁드립니다!

**Edit: ** 이것이 인덱스에 있는 방법입니다.vue

**Edit 2: ** 콘솔로그의 출력을 나타냅니다. 왼쪽은 eventBus 내의 사용자 개체를 나타내고 오른쪽은 eventBus 외부에 빈 개체를 표시합니다.

이거는$emit이것은 get request 응답이 성공했을 때 호출됩니다.코드는 에 있습니다.login.vue인증된 사용자 개체가 채워지고 이 데이터가 에 전송됩니다.index.vue.

eventBus.$emit('thisEvent', { user: this.user })

화살표 기능을 사용하면 자체 컨텍스트를 바인딩하지 않으므로 도움이 됩니다.

mounted: function () {
  eventBus.$on('thisEvent', (userObject) => {
    console.log('event received!', userObject)
    this.currentUser = userObject.user
    console.log('The user: ', this.currentUser)
  })
  console.log('User outside eventbus:', this.currentUser)
}

다른 방법: (사용하지 않는 경우)babel또는 ES6를 지원하지 않는 브라우저를 지원하려고 합니다.)

mounted: function () {
  var self = this
  eventBus.$on('thisEvent', function (userObject) {
    console.log('event received!', userObject)
    self.currentUser = userObject.user
    console.log('The user: ', self.currentUser)
  })
  console.log('User outside eventbus:', self.currentUser)
}

편집

질문의 코드와 스레드에 게시된 솔루션은 정상적으로 작동합니다.표시되는 출력은 지극히 정상입니다.

mounted: function () {
  eventBus.$on('thisEvent', function (userObject) {
    console.log('event received!', userObject)
    this.currentUser = userObject.user
    console.log('The user: ', this.currentUser) // Shows correct new user data
  }.bind(this))
  console.log('User outside eventbus:', this.currentUser) // Shows empty user
}

그mounted 구성 요소의 템플릿과 데이터가 준비되고 렌더링되면 수명 주기 후크가 호출됩니다.

(동일한 조작을,created에서 한 일처럼 후크하다mounted)

그렇게

console.log('User outside eventbus:', this.currentUser)

로그인이 되기 전에eventBus이벤트를 발생시킵니다.

이것을 간단하게 확인할 수 있습니다.watch다음과 같이 합니다.

watch: {
  currentUser(newValue, oldValue) {
    console.log(newValue, oldValue)
  }
}

여기 작업 중인 jsfiddle이 있습니다.

currentUser가 이벤트버스 외부에서 비워지는 이유를 알 수 없습니다.

그 이유는thisscope. classic 함수 구문 내에서 바인딩하고 있습니다.this기능에서 제외됩니다.아래 화살표 기능을 사용하면 바인딩되지 않으므로 작동합니다.this그렇게this.currentUser는 기능 데이터뿐만 아니라 컴포넌트 데이터도 업데이트합니다.

mounted: function () {
    eventBus.$on('thisEvent', (userObject) => {
        console.log('event received!', userObject)
        this.currentUser = userObject.user
        console.log('The user: ', this.currentUser) // Shows correct new user data
    })
    console.log('User outside eventbus:', this.currentUser) // Shows empty user
}

위의 방법으로 동작하지 않는 경우는, 다음의 솔루션을 시험해 주세요.

mounted: function () {
        let _self = this;
        eventBus.$on('thisEvent', (userObject) => {
            console.log('event received!', userObject)
            _self.currentUser = userObject.user
            console.log('The user: ', _self.currentUser) // Shows correct new user data
        })
        console.log('User outside eventbus:', _self.currentUser) // Shows empty user
    }

언급URL : https://stackoverflow.com/questions/42529914/vuejs-2-assign-data-to-variable-with-event-received-data-from-eventbus