15. projekt [vuejs-13]: aktualizacja komponentu, wykorzystanie sesji

Projekt [vuejs-13] opiera się na projekcie [vuejs-12], wprowadzając następującą zmianę: tabela wyświetlana przez tabelę HTML jest zdefiniowana w obiekcie [session], znanym wszystkim komponentom. Jest to zatem sposób na wymianę informacji między komponentami. Koncepcja ta jest bezpośrednio inspirowana sesją internetową. Wykorzystujemy metodę wtyczki, aby udostępnić ten wspólny obiekt w atrybucie [Vue.$session].

Struktura drzewa projektu wygląda następująco:

15.1. Obiekt [session]

Obiekt [session], współdzielony przez wszystkie komponenty, jest zdefiniowany w skrypcie [./session.js]:


const session = {
  // lista symulacji
  get lignes() {
    return this._lignes;
  },
  // generowanie listy symulacji
  generateLignes() {
    this._lignes =
      [
        { id: 3, marié: "oui", enfants: 2, salaire: 35000, impôt: 1200 },
        { id: 5, marié: "non", enfants: 2, salaire: 35000, impôt: 1900 },
        { id: 7, marié: "non", enfants: 0, salaire: 30000, impôt: 2000 }
      ]
  },
  // usunięcie wiersza o indeksie n
  deleteLigne(index) {
    this._lignes.splice(index, 1);
  }
}
// eksport obiektu [session]
export default session;

15.2. Wtyczka [./plugins/pluginSession]

Skrypt [pluginSession] ma następującą treść:


export default {
  install(Vue, session) {
    // dodaje właściwość [$session] do klasy widoku
    Object.defineProperty(Vue.prototype, '$session', {
      // gdy odwołuje się do klasy widoku$session, zwracany jest drugi parametr [session] metody [install]
      get: () => session,
    })
  }
}

wiersz 4: obiekt współdzielony [session] będzie dostępny we właściwości [$session] wszystkich komponentów;

15.3. Główny skrypt [main.js]

Główny skrypt [main.js] ma następującą postać:


// importy
import Vue from 'vue'
import App from './App.vue'

// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

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

// konfiguracja
Vue.config.productionTip = false

// instancjonowanie projektu [App]
new Vue({
  name: "app",
  render: h => h(App),
}).$mount('#aplikacja')

wiersze 14–16: wtyczka [pluginSession] jest zintegrowana z frameworkiem [Vue.js];
po wierszu 16 atrybut [$session] jest dostępny dla wszystkich komponentów;

15.4. Widok główny [App]

Widok [App] wygląda teraz następująco:


<template>
  <div class="container">
    <b-card>
      <!-- komunikat -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-13] : mise à jour d'un composant, partage des données avec une session</h4>
      </b-alert>
      <!-- tabela HTML -->
      <Table @updateTable="updateTable" :key="versionTable"/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // nazwa
  name: "app",
  // komponenty
  components: {
    Table
  },
  // stan wewnętrzny
  data() {
    return {
      // wersja tabeli
      versionTable: 1
    };
  },

  // metody
  methods: {
    updateTable() {
      // eslint-disable-next-line
      console.log("App updateTable");
      // przyrost wersji tabeli
      this.versionTable++;
    }
  }
};
</script>

Uwagi

widok [App] nie obsługuje już tabeli wyświetlanej przez komponent [Table] z wiersza 9;
wiersz 9: komponent [Table] generuje zdarzenie [updateTable], które powoduje odświeżenie komponentu [Table]. Jednym ze sposobów jest użycie atrybutu [:key]. Atrybutowi temu nadaje się wartość modyfikowalną. Za każdym razem, gdy zostanie ona zmieniona, komponent [Table] jest odświeżany;
wiersz 9: wartość atrybutu [:key] jest równa wartości atrybutu [versionTable] z wiersza 27. Metoda [updateTable] (wiersze 33–38) odpowiada za ponowne wygenerowanie komponentu [Table] z wiersza 9. W tym celu metoda zwiększa wartość atrybutu [:key] komponentu [Table] z wiersza 37. Komponent [Table] jest wówczas automatycznie odświeżany;

15.5. Komponent [Table]

Komponent [Table] zmienia się w następujący sposób:


<template>
  <div>
    <!-- pusta lista -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- przycisk odświeżania-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- lista niepusta-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- tabela symulacji -->
      <b-table striped hover responsive :items="lignes" :fields="fields">
        <template v-slot:cell(action)="row">
          <b-button variant="link" @click="supprimerLigne(row.index)">Supprimer</b-button>
        </template>
      </b-table>
    </template>
  </div>
</template>

<script>
export default {
  // obliczony stan
  computed: {
    lignes() {
      return this.$session.lignes;
    }
  },
  // stan wewnętrzny
  data() {
    return {
      fields: [
        { label: "#", key: "id" },
        { label: "Marié", key: "marié" },
        { label: "Nombre d'enfants", key: "enfants" },
        { label: "Salaire", key: "salaire" },
        { label: "Impôt", key: "impôt" },
        { label: "", key: "action" }
      ]
    };
  },
  // metody
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // usuwamy wiersz
      this.$session.deleteLigne(index);
      // zwracamy się do komponentu nadrzędnego o aktualizację widoku
      this.$emit("updateTable");
    },
    // odświeżanie wyświetlanej listy
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // regeneruje się listę symulacji
      this.$session.generateLignes();
      // wysyłamy żądanie do komponentu nadrzędnego o aktualizację widoku
      this.$emit("updateTable");
    }
  }
};
</script>

Uwagi:

atrybut [lignes] (wiersze 4, 12, 17) nie jest już parametrem ustalonym przez komponent nadrzędny, lecz atrybutem obliczonym na podstawie komponentu [Table] (wiersze 30–32). [lignes] jest zatem tablicą [$session.lignes] (wiersz 31);
wiersze 49–56: metoda [supprimerLigne] powoduje usunięcie wiersza z tabeli [$session.lignes]. Usunięcie to domyślnie nie zmienia wyglądu tabeli HTML. Wynika to z faktu, że elementy tabeli [$session] nie są interaktywne: ich modyfikacje nie są odzwierciedlane w komponentach, które z nich korzystają. Z tego powodu komponent [Table] żąda od swojego komponentu nadrzędnego ponownego wygenerowania za pomocą zdarzenia [updateTable] (wiersz 55). Widzieliśmy już, że komponent nadrzędny zwiększa wówczas wartość atrybutu [:key] komponentu [Table], aby wymusić jego ponowne wygenerowanie;
wiersze 58–65: metoda [rechargerListe] żąda od obiektu [$session] odświeżenia tablicy [$session.lignes]. Z tego samego powodu, co poprzednio, ta modyfikacja obiektu [$session.liste] domyślnie nie zmienia wyglądu tabeli HTML. Z tego powodu komponent [Table] zwraca się do swojego elementu nadrzędnego o ponowne wygenerowanie go za pomocą zdarzenia [updateTable] (wiersz 64).

15.6. Wykonanie projektu

Otrzymujemy te same wyniki, co w projekcie [vuejs-12].