Vue.js는 마운트된 상태에서 코드를 실행하여 기능을 재시작합니다.

Vue.js는 마운트된 상태에서 코드를 실행하여 기능을 재시작합니다.

저는 VueJs에서 게임을 만들고 있는데, 페이지가 로딩되면 부팅하고 외부 API에 Ajax를 호출하여 많은 데이터 속성을 만들고 싶습니다.플레이어가 게임에서 이겼을 때 게임을 재개할 수 있는 버튼을 볼 수 있도록 하고 싶다.사용하고 있다mounted()페이지 로드 시 메서드를 실행합니다.

질문입니다.게임 셋업과 API 호출이 다음 중 하나일 경우 재시작 기능을 어떻게 구현해야 할지 모르겠습니다.mounted()기능.이 시스템을 실행할 수 있는 방법이 있나요?mounted()다시 작동합니까?

초기화를 메서드로 요약하고 메서드를 호출합니다.mounted원하는 곳이면 어디든 갈 수 있어

new Vue({
  methods:{
    init(){
      //call API
      //Setup game
    }
  },
  mounted(){
    this.init()
  }
})

그런 다음 템플릿에 처음부터 다시 시작할 수 있는 버튼이 있을 수 있습니다.

<button v-if="playerWon" @click="init">Play Again</button>

이 버튼은playerWon는 플레이어가 게임에서 이겼을 때 버튼이 나타나도록 설정하는 데이터 내의 부울 값을 나타냅니다.그럼 false로 되돌립니다.init.

Vue 3 및 컴포지션 API를 사용하면 사용할 수 있습니다.onMounted나중에 호출할 수 있는 함수를 호출하기 위한 후크:

import {ref, onMounted, watch} from 'vue'

export default {
  setup() {
    const win=ref(false)

    watch(win,(newVal) => {
      if(newVal) {
        init()
      }
    })

    onMounted(()=>{
      init()
    })

    function init(){
      //init
    }
  }
}

이동할 수도 있습니다.mountedVue 인스턴스를 제거하고 최상위 범위의 함수로 만듭니다.이것은 Vue에서의 서버측 렌더링에도 도움이 됩니다.

function init() {
  // Use `this` normally
}

new Vue({
  methods:{
    init
  },
  mounted(){
    init.call(this)
  }
})

언급URL : https://stackoverflow.com/questions/45021907/vue-js-run-a-code-in-mounted-and-again-for-restart-functionality