vuejs vuex test

Game.vue

<template>
  <div>
    <div class="container__game" v-if="stateSpecies != null" :class="'container__game--'+threat">
      <div class="virtualpet__interface">
        <header class="">
          <div class="header__link" >
            <router-link to="/map" class="button button--left"><img :src="'static/img/icons/worldmap.png'" alt="Retourner sur la carte"></router-link>
          </div>
          <div class="header__title" v-if='!isFound'>
            <h1>Félicitations <br> Tu as découvert le {{ species }}!</h1>
          </div>
          <div class="interface__header" v-else>
            <div class="header__infos">
              <h1 class="pet__name">{{ speciesName }} le {{ species }}</h1>
              <div class="lifegauge"><span class="life" :class="{ bad : lifePercent <= 33, mid : lifePercent <= 66, good : lifePercent > 66  }" :style="'width:'+lifePercent+'%'"></span></div>
              <div class="counts">
                <p class="count count--lifeCount"><strong>{{ life }} / {{ lifeGauge }}</strong> <img :src="'/static/img/icons/like.png'" alt="coeur"></p>
              </div>
            </div>
          </div>
          <div class="header__link header__link" v-show='isFound'>
            <div @click="toggleSidebar" class="toggleSidebar button button--right"><img :src="'static/img/icons/info-blue.png'" alt="Retourner sur la carte"></div>
          </div>
        </header>
        <div class="interface__animal">
          <div class="animal__illustration">
            <img :src="'static/img/species'+ID+'.png'" :alt="speciesName">
          </div>
          <transition name="fade">
            <popup class="feedback__message" v-show="message" type="feedback" title="">
              {{ message }}
            </popup>
          </transition>
        </div>
        <div class="bubbles"></div>
        <footer class="interface__actions">
          <popup v-if='!isFound' type="hasInput" title="Adopte moi pour pouvoir me sauver ! ">
            <form class="popup__nameform" @submit.prevent='chooseAnimalName()'>
              <input class="home__popup--name" type="text" placeholder="Donne moi un nom" required :value="name">
              <div class="home__popup--button">
                <input type="submit" value="OK !">
              </div>
            </form>

          </popup>
          <!--choseSubAction indique qu'une action à été cliquée et nous indique laquelle, on traite cette reponse dans chooseSubAction() -->
          <action v-else v-for="action in actions" :action="action" :lifeGauge="lifeGauge" @choseSubAction="chooseSubAction"></action>

        </footer>
      </div>
      <div class="virtualpet__sidebar" :class="{ close: !showSidebar }" v-if='isFound'>

        <div class="sidebar__content">
          <div class="content content--infos">
            <h2>Informations</h2>
            <p>{{ speciesName }} {{ story }}</p>
          </div>
          <div class="content content--stats">
            <div class="stats stats--home">
              <div class="icon"><img :src="'/static/img/icons/bubble.png'"></div>
              <div class="text">
                <p><strong>Océan :</strong> {{ ocean }}</p>
                <p><strong>habitat :</strong> {{ place }}</p>
              </div>
            </div>
            <div class="stats stats--size">
              <div class="icon"><img :src="'/static/img/icons/smallFish.png'"></div>
              <div class="text">
                <p><strong>Nourriture :</strong> {{ food }}</p>
                <p><strong>Poids et taille :</strong> {{ size }}m de long et {{ weight }}kg</p>
              </div>
            </div>
            <div class="stats stats--threat">
              <div class="icon"><img :src="'/static/img/icons/protect.png'"></div>
              <div class="text">
                <p><strong>Menace :</strong> {{ threat }}</p>
                <p><strong>Niveau de danger :</strong> {{ dangerState }}</p>
              </div>
            </div>
          </div>
          <div class="content content--funfact">
            <p><strong>Anecdote : </strong> {{ funfact }}</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  //import SpeciesStore from '../../Classes/SpeciesStore.js'

  import Action from '../Game/Action'
  import Popup from '../Game/Popup'

  //let speciesStore = new SpeciesStore() //pour récupérer toutes les espèces

  export default {
    name: 'Game',
    data () {
      return {
        title:'Nautilus - Ocean project',
        state: {},
        currentSpecie: 0, //si on tombe sur la page Game on a quand même la première espèce d'affichée
        selectedAction:'',
        selectedSubAction:'',
        message: '', //test
        showSidebar: false,

      }
    },
    components: {
      Action, Popup
    },
    methods: {
      toggleSidebar : function(){
        this.showSidebar = !this.showSidebar
      },
      //fonction qui lance toute la logique qui suit
      //TODO : ajout de l'animation au click (ajout d'une classe ?)
      chooseSubAction: function (action, subAction) {
        //on précise quelle est l'action selectionnée pour la garder en mémoire, pourquoi? je sais pas
        this.selectedSubAction = subAction.name
        //on modifie la valeur de la jauge
        this.$store.commit('setGauge', this.currentSpecie, action, subAction.effect)
        this.$store.commit('setLife', this.currentSpecie)

        //Si la vie est égale ou supérieure à la jauge, l'espèce est sauvée. Sinon, elle l'est pas. Simple. Basique.
        if(life >= lifeGauge) {
          this.$store.commit('setIsSaved', this.currentSpecie, true)
        } else this.$store.commit('setIsSaved', this.currentSpecie, false)

        this.message = subAction.message
        setTimeout(()=>{
          this.message = null
        },2000);
      },
      chooseAnimalName(){
        this.$store.commit('setName', this.currentSpecie)
        this.$store.commit('setIsFound', this.currentSpecie, true)
        this.$store.commit('setLife', this.currentSpecie)
      }
    },
    computed : {

      stateSpecies(){
        return this.$store.state.species;
      },
      ID(){
        return this.$store.state.species[this.currentSpecie].ID;
      },
      species(){
        return this.$store.state.species[this.currentSpecie].species;
      },
      speciesName(){
        return this.$store.state.species[this.currentSpecie].name;
      },
      life(){
        return this.$store.state.species[this.currentSpecie].life;
      },
      story(){
        return this.$store.state.species[this.currentSpecie].story;
      },
      ocean(){
        return this.$store.state.species[this.currentSpecie].ocean;
      },
      place(){
        return this.$store.state.species[this.currentSpecie].place;
      },
      size(){
        return this.$store.state.species[this.currentSpecie].size;
      },
      weight(){
        return this.$store.state.species[this.currentSpecie].weight;
      },
      food(){
        return this.$store.state.species[this.currentSpecie].food;
      },
      lifeGauge(){
        return this.$store.state.species[this.currentSpecie].lifeGauge;
      },
      lifePercent(){
        return this.$store.state.species[this.currentSpecie].lifePercent;
      },
      isFound() {
        return this.$store.state.species[this.currentSpecie].isFound;
        //console.log(this.currentSpecie)
      },
      dangerState() {
        return this.$store.state.species[this.currentSpecie].dangerState;
      },
      funFact() {
        return this.$store.state.species[this.currentSpecie].funFact;
      },
      actions(){
        return this.$store.state.species[this.currentSpecie].actions;
      },
      threat() {
        return this.$store.state.species[this.currentSpecie].threat;
      },
      name :{
        get: function() {
          return this.$store.state.species[this.currentSpecie].name;
        },
        // setter
        set: function(newValue) {
          this.$store.dispatch('setName',this.currentSpecie, newValue)
        }
      }

    },
    mounted() {
      if(this.$route.params.id) this.currentSpecie = this.$route.params.id;
      this.state = this.$store.state
      //console.log(this.$store.state.species)
    },
    beforeRouteLeave (to, from , next) {
      next()
      //speciesStore.getLocalSpecies()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  @import "../../assets/scss/variables.scss";
  @import "../../assets/scss/global.scss";
  @import "../../assets/scss/typography.scss";
  @import "../../assets/scss/transitions.scss";
  @import "Game.scss";
</style>