클래스 메서드에서 Vue 변수에 액세스하는 올바른 방법

클래스 메서드에서 Vue 변수에 액세스하는 올바른 방법

코드는 다음과 같습니다.

<div id='R'> {{ y.vmx() }} </div>

<script>
    class Test {
      vmx() {
        return vm.x
      }
    }

    var vm = new Vue({
      el: '#R',
      data: {
        x: 11,
        y: new Test()
      }
    })
</script>

다음의 에러가 표시됩니다.TypeError: Cannot read property 'x' of undefined at Test.vmx ((index):18)

클래스 메서드 내의 Vue 변수에 액세스하려면 어떻게 해야 합니까?(V2.6.11 버전)

이 경우 템플릿은 다음 시간 전에 로드됩니다. vm할당되어 있기 때문에vm이undefined에서Test이상적으로는 코드 설계에서는 이러한 순환 의존성을 피해야 하지만 몇 가지 해결 방법이 있습니다.

옵션 1: 모든 참조를 연기합니다.vm안에서.Test초기 템플릿이 로드될 때까지 계속됩니다.

예를 들어,ready 컴포넌트가 마운트된 후 다음 눈금에 플래그를 지정한 후 플래그를 사용하여 액세스해야 하는 템플릿 부품을 조건부로 렌더링합니다.vm:

class Test {
  vmx() {
    return vm.x
  }
}

var vm = new Vue({
  el: '#app',
  data: () => ({
    x: 2,
    y: new Test(),
    ready: false,
  }),
  async mounted() {
    await this.$nextTick()
    this.ready = true
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

<div id="app">
  <p v-if="ready">{{ y.vmx() }}</p>
</div>

OPTION 2: 참조를 전달하다vm인스턴스화할 때Test

class Test {
  constructor(vm) {
    this.vm = vm
  }
  
  vmx() {
    return this.vm.x
  }
}

const vm = new Vue({
  el: '#app',
  data() {
    return {
      x: 2,
      y: new Test(this),
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

<div id="app">
  <p>{{ y.vmx() }}</p>
</div>

언급URL : https://stackoverflow.com/questions/62604186/the-right-way-to-access-a-vue-variable-from-a-class-method