我在 VueJS 中创建一个游戏,当页面加载时,我想要一个方法来触发,对外部 API 进行 ajax 调用并创建一堆数据属性。当玩家赢得回合时,我希望他们能够看到一个允许他们重新开始游戏的按钮。我正在使用mounted()
钩子在页面加载时触发该方法。
我的问题是,如果游戏设置和 API 调用在函数内,我不确定如何实现重启mounted()
功能。有没有办法mounted()
再次运行该功能?
我在 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 in init
。
使用 Vue 3 和组合 API,您可以使用onMounted
hook 来调用稍后可以调用的函数:
import {ref, onMounted, watch} from 'vue'
export default {
setup() {
const win=ref(false)
watch(win,(newVal) => {
if(newVal) {
init()
}
})
onMounted(()=>{
init()
})
function init(){
//init
}
}
}
您还可以移出mounted
Vue 实例,使其成为顶级范围内的函数。这对于Vue 中的服务器端渲染也是一个有用的技巧。
function init() {
// Use `this` normally
}
new Vue({
methods:{
init
},
mounted(){
init.call(this)
}
})