Vue.js запускает код в смонтированном и снова для функции перезапуска

Я создаю игру на VueJS, где при загрузке страницы я хочу, чтобы метод запускался, выполнял вызов ajax к внешнему API и создавал набор свойств данных. Когда игрок выигрывает раунд, я хочу, чтобы он мог видеть кнопку, позволяющую перезапустить игру. Я использую хук mounted() для запуска метода при загрузке страницы.

У меня вопрос: я не уверен, как реализовать функцию перезапуска, если настройка игры и вызов API находятся внутри функции mounted(). Есть ли способ снова запустить функцию mounted()?


javascript vue.js vuejs3 vuejs2 model-view-controller
person lnamba    schedule 10.07.2017    source источник

Ответы (3)


arrow_upward
107
arrow_downward

Преобразуйте свою инициализацию в метод и вызовите метод из mounted и где угодно еще.

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

Тогда, возможно, в вашем шаблоне есть кнопка, чтобы начать все сначала.

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

В этой кнопке playerWon представляет логическое значение в ваших данных, которое вы должны установить, когда игрок выигрывает игру, чтобы появилась кнопка. Вы бы вернули значение false в init.

person Bert    schedule 10.07.2017
comment
На самом деле кажется, что все рекомендуют использовать ловушку created, а не mounted для инициализации компонента. В частности, для получения данных. - person Alexis.Rolland; 05.02.2019
comment
@ Alexis.Rolland Я думаю, что запуск асинхронного кода, вероятно, лучше создать или смонтировать. Ваш выбор, который использовать, обычно зависит от того, нужен ли вам доступ к визуализированным элементам или нет. В этом конкретном случае я думаю, что OP просто хотела стратегию повторного использования кода, вызываемого либо из смонтированного, либо из созданного. - person Bert; 06.02.2019
comment
Принцип единой ответственности. - person PA-GW; 25.08.2020
comment
Кажется, порядок имеет значение. Наличие смонтированного блока после методов работает, а до него - нет. - person Arthur; 03.11.2020

arrow_upward
1
arrow_downward

Вы также можете переместить mounted из экземпляра Vue и сделать его функцией в области верхнего уровня. Это также полезный прием для рендеринга на стороне сервера во Vue .

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

new Vue({
  methods:{
    init
  },
  mounted(){
    init.call(this)
  }
})
person vkarpov15    schedule 08.01.2020

arrow_upward
1
arrow_downward

С 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
    }
 }
}
person Boussadjra Brahim    schedule 27.03.2021