Introduction au framework VUE.JS par l'exemple

// plugin Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// store Vuex
const store = new Vuex.Store({
  state: {
    // le tableau des simulations
    simulations: [],
    // le n° de la dernière simulation
    idSimulation: 0
  },
  mutations: {
    // suppression ligne n° index
    deleteSimulation(state, index) {
      ...
    },
    // ajout d'une simulation
    addSimulation(state, simulation) {
      ...
    },
    // nettoyage state
    clear(state) {
      // plus de simulations
      state.simulations = [];
      // la numérotation des simulations repart de 0
      state.idSimulation = 0;
    }
  }
});
// export de l'objet [store]
export default store;

// store Vuex
import store from './store'

// plugin Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// store Vuex
const store = new Vuex.Store({
  state: {
    // le tableau des simulations
    simulations: [],
    // le n° de la dernière simulation
    idSimulation: 0
  },
  mutations: {
    ...
  }
});
// export de l'objet [store]
export default store;

// on importe le store Vuex
import store from './store'
// on importe la configuration
import config from './config';

// l'objet [session]
const session = {
  // session démarrée
  started: false,
  // authentification
  authenticated: false,
  // heure de sauvegarde
  saveTime: "",
  // couche [métier]
  métier: null,
  // état Vuex
  state: null,

  // sauvegarde de la session dans une chaîne jSON
  save() {
    // on ajoute à la session quelques proprités
    this.saveTime = Date.now();
    this.state = store.state;
    // on la transforme en jSON
    const json = JSON.stringify(this);
    // on la stocke sur le navigateur
    localStorage.setItem("session", json);
    // eslint-disable-next-line no-console
    console.log("session save", json);
  },

  // restauration de la session
  restore() {
    // on récupère la session jSON à partir du navigateur
    const json = localStorage.getItem("session")
    // si on a récupéré qq chose
    if (json) {
      // on restaure toutes les clés de la session
      const restore = JSON.parse(json);
      for (var key in restore) {
        if (restore.hasOwnProperty(key)) {
          this[key] = restore[key];
        }
      }
      // si on a dépassé une certaine durée d'inactivité depuis le début de la session, on repart de zéro
      let durée = Date.now() - this.saveTime;
      if (durée > config.duréeSession) {
        // on vide la session - elle sera également sauvegardée
        session.clear();
      } else {
        // on régénère le store Vuex
        store.replaceState(JSON.parse(JSON.stringify(this.state)));
      }
    }
    // eslint-disable-next-line no-console
    console.log("session restore", this);
  },

    // on nettoie la session
  clear() {
    // eslint-disable-next-line no-console
    console.log("session clear");
    // raz de certains champs de la session
    this.authenticated = false;
    this.saveTime = "";
    this.started = false;
    if (this.métier) {
      // on réinitialise le champ [taxAdminData]
      this.métier.taxAdminData = null;
    }
    // le store Vuex est nettoyé également
    store.commit("clear");
    // on sauvegarde la nouvelle session
    this.save();
  },
}

// export de l'objet [session]
export default session;

// utilisation de la bibliothèque [axios]
const axios = require('axios');
// timeout des requêtes HTTP
axios.defaults.timeout = 2000;
...

// export de la configuration
export default {
  // objet [axios]
  axios: axios,
  // délai maximal d'inactivité de la session : 5 mn = 300 s = 300000 ms
  duréeSession: 300000
}

export default {
  install(Vue, session) {
    // ajoute une propriété [$session] à la classe vue
    Object.defineProperty(Vue.prototype, '$session', {
      // lorsque Vue.$session est référencé, on rend le 2ième paramètre [session]
      get: () => session,
    })
  }
}

// log de démarrage
// eslint-disable-next-line no-console
console.log("main started");

// imports
import Vue from 'vue'

...

// instanciation couche [métier]
import Métier from './couches/Métier';
const métier = new Métier();

// plugin [métier]
import pluginMétier from './plugins/pluginMétier'
Vue.use(pluginMétier, métier)

// store Vuex
import store from './store'

// session
import session from './session';
import pluginSession from './plugins/pluginSession'
Vue.use(pluginSession, session)

// on restore la session avant de redémarrer
session.restore();

// on restaure la couche [métier]
if (session.métier && session.métier.taxAdminData) {
  métier.setTaxAdminData(session.métier.taxAdminData);
}

// démarrage de l'UI
new Vue({
  el: '#app',
  // le routeur
  router: router,
  // le store Vuex
  store: store,
  // la vue principale
  render: h => h(Main),
})

// log de fin
// eslint-disable-next-line no-console
console.log("main terminated, session=", session);

// imports
import Vue from 'vue'
import VueRouter from 'vue-router'
// les vues
import Authentification from './views/Authentification'
import CalculImpot from './views/CalculImpot'
import ListeSimulations from './views/ListeSimulations'
import NotFound from './views/NotFound'
// la session
import session from './session'

// plugin de routage
Vue.use(VueRouter)

// les routes de l'application
const routes = [
  // authentification
  { path: '/', name: 'authentification', component: Authentification },
  { path: '/authentification', name: 'authentification', component: Authentification },
  // calcul de l'impôt
  {
    path: '/calcul-impot', name: 'calculImpot', component: CalculImpot,
    meta: { authenticated: true }
  },
  // liste des simulations
  {
    path: '/liste-des-simulations', name: 'listeSimulations', component: ListeSimulations,
    meta: { authenticated: true }
  },
  // fin de session
  {
    path: '/fin-session', name: 'finSession'
  },
  // page inconnue
  {
    path: '*', name: 'notFound', component: NotFound,
  },
]

// le routeur
const router = new VueRouter({
  // les routes
  routes,
  // le mode d'affichage des URL 
  mode: 'history',
  // l'URL de base de l'application
  base: '/client-vuejs-impot/'
})

// vérification des routes
router.beforeEach((to, from, next) => {
  // eslint-disable-next-line no-console
  console.log("router to=", to, "from=", from);
  // route réservée aux utilisateurs authentifiés ?
  if (to.meta.authenticated && !session.authenticated) {
    next({
      // on passe à l'authentification
      name: 'authentification',
    })
    // retour à la boucle événementielle
    return;
  }
  // cas particulier de la fin de session
  if (to.name === "finSession") {
    // on nettoie la session
    session.clear();
    // on va sur la vue [authentification]
    next({
      name: 'authentification',
    })
    // retour à la boucle événementielle
    return;
  }
  // autres cas - vue suivante normale du routage
  next();
})

// export du router
export default router

<!-- définition HTML de la vue -->
<template>
  <!-- mise en page -->
  <Layout :left="true" :right="true">
    <!-- alerte dans la colonne de droite -->
    <template slot="right">
      <!-- message sur fond jaune -->
      <b-alert show variant="danger" align="center">
        <h4>Cette page n'existe pas</h4>
      </b-alert>
    </template>
    <!-- menu de navigation dans la colonne de gauche -->
    <Menu slot="left" :options="options" />
  </Layout>
</template>

<script>
// imports
import Layout from "./Layout";
import Menu from "./Menu";
export default {
  // composants
  components: {
    Layout,
    Menu
  },
  // état interne du composant
  data() {
    return {
      // options du menu de navigation
      options: [
        {
          text: "Authentification",
          path: "/"
        }
      ]
    };
  },
  // cycle de vie
  created() {
    // eslint-disable-next-line
    console.log("NotFound created");
    // on regarde quelles options de menu offrir
    if (this.$session.authenticated && this.$métier.taxAdminData) {
      // l'utilisateur peut faire des simulations
      Array.prototype.push.apply(this.options, [
        {
          text: "Calcul de l'impôt",
          path: "/calcul-impot"
        },
        {
          text: "Liste des simulations",
          path: "/liste-des-simulations"
        }
      ]);
    }
  }
};
</script>

<!-- définition HTML de la vue -->
<template>
  <Layout :left="false" :right="true">
    ...
  </Layout>
</template>

<!-- dynamique de la vue -->
<script>
import Layout from "./Layout";
export default {
  // état du composant
  data() {
    return {
      // utilisateur
      user: "",
      // son mot de passe
      password: "",
      // contrôle l'affichage d'un msg d'erreur
      showError: false,
      // le message d'erreur
      message: ""
    };
  },

  // composants utilisés
  components: {
    Layout
  },

  // propriétés calculées
  computed: {
    // saisies valides
    valid() {
      return this.user && this.password && this.$session.started;
    }
  },

  // gestionnaires d'évts
  methods: {
    // ----------- authentification
    async login() {
      try {
        // début attente
        this.$emit("loading", true);
        // on n'est pas encore authentifié
        this.$session.authenticated = false;
        // authentification bloquante auprès du serveur
        const response = await this.$dao.authentifierUtilisateur(
          this.user,
          this.password
        );
        // fin du chargement
        this.$emit("loading", false);
        // analyse de la réponse du serveur
        if (response.état != 200) {
          // on affiche l'erreur
          this.message = response.réponse;
          this.showError = true;
          // retour à la boucle événementielle
          return;
        }
        // pas d'erreur
        this.showError = false;
        // on est authentifié
        this.$session.authenticated = true;
        // --------- on demande maintenant les données de l'administration fiscale
        // au départ, pas de donnée
        this.$métier.setTaxAdminData(null);
        // début attente
        this.$emit("loading", true);
        // demande bloquante auprès du serveur
        const response2 = await this.$dao.getAdminData();
        // fin du chargement
        this.$emit("loading", false);
        // analyse de la réponse
        if (response2.état != 1000) {
          // on affiche l'erreur
          this.message = response2.réponse;
          this.showError = true;
          // retour à la boucle événementielle
          return;
        }
        // pas d'erreur
        this.showError = false;
        // on mémorise dans la couche [métier] la donnée reçue
        this.$métier.setTaxAdminData(response2.réponse);
        // on peut passer au calcul de l'impôt
        this.$router.push({ name: "calculImpot" });
      } catch (error) {
        // on remonte l'erreur au composant principal
        this.$emit("error", error);
      } finally {
        // maj session
        this.$session.métier = this.$métier;
        // on sauvegarde la session
        this.$session.save();
      }
    }
  },
  // cycle de vie : le composant vient d'être créé
  created() {
    // eslint-disable-next-line
    console.log("Authentification created");
    // l'utilisateur peut-il faire des simulations ?
    if (
      this.$session.started &&
      this.$session.authenticated &&
      this.$métier.taxAdminData
    ) {
      // alors l'utilisateur peut faire des simulations
      this.$router.push({ name: "calculImpot" });
      // retour à la boucle événementielle
      return;
    }
    // si la session jSON a déjà été démarrée, on ne la redémarre pas de nouveau
    if (!this.$session.started) {
      // début attente
      this.$emit("loading", true);
      // on initialise la session avec le serveur - requête asynchrone
      // on utilise la promesse rendue par les méthodes de la couche [dao]
      this.$dao
        // on initialise une session jSON
        .initSession()
        // on a obtenu la réponse
        .then(response => {
          // fin attente
          this.$emit("loading", false);
          // analyse de la réponse
          if (response.état != 700) {
            // on affiche l'erreur
            this.message = response.réponse;
            this.showError = true;
            // retour à la boucle événementielle
            return;
          }
          // la session a démarré
          this.$session.started = true;
        })
        // en cas d'erreur
        .catch(error => {
          // on remonte l'erreur à la vue [Main]
          this.$emit("error", error);
        })
        // dans tous les cas
        .finally(() => {
          // on sauvegarde la session
          this.$session.save();
        });
    }
  }
};
</script>

<!-- définition HTML de la vue -->
<template>
  ...
</template>

<script>
// imports
import FormCalculImpot from "./FormCalculImpot";
import Menu from "./Menu";
import Layout from "./Layout";

export default {
  // état interne
  data() {
    return {
      // options du menu
      options: [
        {
          text: "Liste des simulations",
          path: "/liste-des-simulations"
        },
        {
          text: "Fin de session",
          path: "/fin-session"
        }
      ],
      // résultat du calcul de l'impôt
      résultat: "",
      résultatObtenu: false
    };
  },
  // composants utilisés
  components: {
    Layout,
    FormCalculImpot,
    Menu
  },
  // méthodes de gestion des évts
  methods: {
    // résultat du calcul de l'impôt
    handleResultatObtenu(résultat) {
      // on construit le résultat en chaîne HTML
      ...
      // une simulation de +
      this.$store.commit("addSimulation", résultat);
      // on sauvegarde la session
      this.$session.save();
    }
  },
  // cycle de vie
  created() {
    // eslint-disable-next-line
    console.log("CalculImpot created");
  }
};
</script>

<!-- définition HTML de la vue -->
<template>
  ...
  </div>
</template>

<script>
// imports
import Layout from "./Layout";
import Menu from "./Menu";
export default {
  // composants
  components: {
    Layout,
    Menu
  },
  // état interne
  data() {
    ...
  },
  // état interne calculé
  computed: {
    // liste des simulations prise dans le store Vuex
    simulations() {
      return this.$store.state.simulations;
    }
  },
  // méthodes
  methods: {
    supprimerSimulation(index) {
      // eslint-disable-next-line
      console.log("supprimerSimulation", index);
      // suppression de la simulation n° [index]
      this.$store.commit("deleteSimulation", index);
      // on sauvegarde la session
      this.$session.save();
    }
  },
  // cycle de vie
  created() {
    // eslint-disable-next-line
    console.log("ListeSimulations created");
  }
};
</script>