programing

vuej 마운트된 라이프 사이클이 트리거되지 않음

copysource 2022. 10. 21. 22:08
반응형

vuej 마운트된 라이프 사이클이 트리거되지 않음

아래의 내 앱 컴포넌트에서는 mounted() 라이프 사이클 훅이 트리거되지 않습니다.

<template>
  <div>
    <div v-if='signedIn'>
        <router-view />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Oidc from 'oidc-client'

Vue.use(Oidc)

export default {
  data () {
    return {
      user: null,
      signedIn: false,
      mgr: new Oidc.UserManager({...settings...})
    }
  },
  methods: {
    signIn () {
    },
    signOut () {
    },
    getUser () {
    },
    mounted () {
      this.getUser()
    }
  }
}
</script>

코드를 여러 번 살펴봤는데 뭘 놓쳤는지 모르겠어요main.js 파일에 다음과 같은 내용이 있습니다.

new Vue({
  el: '#app',
  render: h => h(App),
  router
})

이 경우,mounted내부method면적과 이것은 마운트(mounted)라는 '기능'을 의미합니다(예:getUser())가 아닙니다.mounted컴포넌트가 마운트되면 자동으로 호출됩니다.

다음과 같이 변경해야 합니다.

methods: {
    signIn () {
    },
    signOut () {
    },
    getUser () {
    }   
  },
mounted () {
      this.getUser()
}

그 후, 통상의 라이프 사이클 방식으로서 Vue에 의해서 자동적으로 호출됩니다.

도움이 됐으면 좋겠다!

언급URL : https://stackoverflow.com/questions/47305733/vuejs-mounted-lifecycle-not-triggering

반응형