16. Projekt [vuejs-14]: przywrócenie reaktywności sesji

Zauważyliśmy, że obiekt [session] użyty w poprzednim projekcie miał właściwości nieaktywne: w przypadku ich modyfikacji widoki korzystające z tych właściwości nie są aktualizowane. Możliwe jest uzyskanie obiektu [session] o właściwościach aktywnych, jeśli zostanie on zapisany w danych aktywnych widoków. Pokazuje to projekt [vuejs-14].

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

16.1. Obiekt [session]

Obiekt [session], wspólny dla wszystkich komponentów, pozostaje niezmieniony.

16.2. Wtyczka [./plugins/pluginSession]

Skrypt [pluginSession] pozostaje bez zmian. Wspólny obiekt [session] jest dostępny we właściwości [$session] wszystkich komponentów.

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

Główny skrypt [main.js] pozostaje bez zmian.

16.4. Główny widok [App]

Widok [App] ma teraz następujący wygląd:

<template>
  <div class="container">
    <b-card>
      <!-- komunikat -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation d'un objet partagé entre composants</h4>
      </b-alert>
      <!-- tabela HTML -->
      <Table/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // nazwa
  name: "app",
  // komponenty
  components: {
    Table
  },
  // cykl życia
  created() {
    // generowanie tabeli symulacji
    this.$session.generateLignes();
  }
};
</script>

Uwagi

• wiersz 9: komponent [Table] nie generuje już zdarzenia [updateTable], które powoduje odświeżenie komponentu [Table]. W związku z tym zniknęła metoda [updateTable];

16.5. Komponent [Table]

Komponent [Table] ulega następującym zmianom:

<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" }
      ],
      session : {}
    };
  },
  // cykl życia
  created(){
    this.session=this.$session
  },
  // metody
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // usuwamy wiersz
      this.session.deleteLigne(index);
    },
    // odświeżanie wyświetlanej listy
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // regeneracja listy symulacji
      this.session.generateLignes();
    }
  }
};
</script>

Uwagi:

• nowością są wiersze 49–51: po utworzeniu widoku sesja [this.$session] jest zapisywana we właściwości [session] w wierszu 45. Umieszczona w tym miejscu właściwość [session] jest reaktywna;
• wiersze 58 i 65: zamiast używać [this.$session] do dodawania/usuwania wiersza z tabeli, stosuje się właściwość reaktywną [this.session];

16.6. Wykonanie projektu

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