Как контролировать поток приложения vue

Question

Я пытаюсь сделать игру, используя vue, и я разработал следующую структуру:

<template>
    <div v-if="status==='beforegamestart'" key="beforegamestart">
        <button v-on:click="startGame()">Start</button>
    </div>

    <div v-else-if="status==='inprocess'" key="inprocess">
        <h1>Game in process</h1>
        <button v-on:click="finishGame()">Finish</button>
    </div>

    <div v-else-if="status==='gameover'" key="gameover">
        <h2>Game over</h2>
    </div>

    <div v-else>
        <h1>Else</h1>
    </div>
</template>

<script>
  export default {
    name: 'GameComponent',
    data() {
      return {
        status: 'beforegamestart'
      }
    },
    methods: {
      startGame: function() {
        this.status = "inprocess";
      },
      finishGame: function() {
        this.status = "gameover";
      }
    }
  }
</script>

<style>

</style>

Интересно, каков обычный способ сделать игру наподобие flappy bird in vue, у которой есть начало?меню, игра в процессе и законченный вид?Можно ли так делать?Мне просто интересно, как правильно менять разные взгляды.

Answer 1

Если бы я был вами, я бы сделал следующее:

Шаг 1: Разделите начальный, текущий и игровой экраны на их собственные компоненты.и импортируйте их в App.vue (или как хотите) следующим образом:

import Start from './Start.vue'
import Game from './Game.vue'
import GameOver from './GameOver.vue'

Шаг 2: Используйте динамический компонент в шаблоне.См. https://vuejs.org/v2/guide/components.html#Dynamic-Components

<component :is="currentState"/>

Шаг 3: Имейте метод / вычисленное свойство (или для бонусных очков используйте vuex), которое обрабатывает текущее состояние игры и должно отображать компоненты на основе этого значения.

computed: {
  currentState: function() {
    switch(status){
      case "beforeGameStart":
        return "Start";
        break;
      ...
    }
  }
}