Question

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

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

谢谢！

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。

Answer 2

您还可以将mounted移出Vue实例，并使其成为顶层作用域中的函数。对于server side rendering in Vue来说，这也是一个有用的技巧。

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

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

Answer 3

借助 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
    }
 }
}

Vue JS mount（）

3 个答案: