16. Проект [vuejs-14]: зробити сесію реактивною

Ми бачили, що об’єкт [session], який використовувався в попередньому проєкті, мав нереактивні властивості: якщо їх змінити, подання, що використовують ці властивості, не оновлюються. Можна отримати реактивний об’єкт [session], якщо зберегти його в реактивних даних подань. Саме це демонструє проект [vuejs-14].

Структура проекту така:

16.1. Об’єкт [session]

Об’єкт [session], спільний для всіх компонентів, не змінюється.

16.2. Плагін [./plugins/pluginSession]

Скрипт [pluginSession] не змінюється. Спільний об’єкт [session] доступний у властивості [$session] усіх компонентів.

16.3. Головний скрипт [main.js]

Головний скрипт [main.js] не змінюється.

16.4. Головний вигляд [App]

Вигляд [App] тепер має такий вигляд:

<template>
  <div class="container">
    <b-card>
      <!-- повідомлення -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation d'un objet partagé entre composants</h4>
      </b-alert>
      <!-- таблиця HTML -->
      <Table/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // ім'я
  name: "app",
  // компоненти
  components: {
    Table
  },
  // життєвий цикл
  created() {
    // створення таблиці моделювання
    this.$session.generateLignes();
  }
};
</script>

Коментарі

• рядок 9: компонент [Table] більше не генерує подію [updateTable], яка вимагає перегенерації компонента [Table]. Як наслідок, метод [updateTable] зник;

16.5. Компонент [Table]

Компонент [Table] змінюється наступним чином:

<template>
  <div>
    <!-- порожній список -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- кнопка оновлення-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- непорожній список-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- таблиця симуляцій -->
      <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 {
  // розрахований стан
  computed: {
    lignes() {
      return this.session.lignes;
    }
  },
  // внутрішній стан
  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 : {}
    };
  },
  // життєвий цикл
  created(){
    this.session=this.$session
  },
  // методи
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // видалення рядка
      this.session.deleteLigne(index);
    },
    // перезавантаження списку, що відображається
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // перегенерувати список симуляцій
      this.session.generateLignes();
    }
  }
};
</script>

Коментарі:

• нововведенням є рядки 49–51: під час створення подання сесія [this.$session] зберігається у властивості [session] у рядку 45. Розміщена тут, властивість [session] є реактивною;
• рядки 58 і 65: замість використання [this.$session] для додавання/видалення рядка з таблиці використовується реактивне властивість [this.session];

16.6. Виконання проєкту

Отримуємо ті самі результати, що й у проєкті [vuejs-12].