Vue.js 在挂载并再次运行代码以实现重启功能

Question

我正在 VueJS 中创建一个游戏，当页面加载时，我想要一个方法来触发，对外部 API 进行 ajax 调用并创建一堆数据属性。当玩家赢得回合时，我希望他们能够看到一个允许他们重新开始游戏的按钮。我正在使用 mounted() 钩子在页面加载时触发该方法。

我的问题是，如果游戏设置和 API 调用在 mounted() 函数内，我不确定如何实现重启功能。有没有办法再次运行 mounted() 功能？

原文由 lnamba 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将您的初始化抽象为一个方法，并从 mounted 以及您想要的任何其他地方调用该方法。

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

然后可能在您的模板中有一个按钮来重新开始。

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

在此按钮中， playerWon 代表您数据中的一个布尔值，您将在玩家赢得游戏时设置该值，以便出现按钮。您可以在 init 中将其设置回 false。

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 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
    }
  }
}

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议