15. проект [vuejs-13]: оновлення компонента, використання сеансу

Проєкт [vuejs-13] базується на проєкті [vuejs-12] із таким зміною: таблиця, що відображається таблицею HTML, визначається в об’єкті [session], відомим усім компонентам. Отже, це спосіб обміну інформацією між компонентами. Ця концепція безпосередньо натхненна веб-сесією. Ми використовуємо метод плагіна, щоб зробити цей спільний об’єкт доступним в атрибуті [Vue.$session].

Структура проекту виглядає наступним чином:

15.1. Об’єкт [session]

Об’єкт [session], спільний для всіх компонентів, визначено у скрипті [./session.js]:


const session = {
  // список симуляцій
  get lignes() {
    return this._lignes;
  },
  // генерація списку симуляцій
  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 }
      ]
  },
  // видалення рядка з індексом №
  deleteLigne(index) {
    this._lignes.splice(index, 1);
  }
}
// експорт об’єкта [session]
export default session;

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

Скрипт [pluginSession] має такий вигляд:


export default {
  install(Vue, session) {
    // додавання властивості [$session] до класу «Вигляд»
    Object.defineProperty(Vue.prototype, '$session', {
      // коли згадується Vue.$session, повертається другий параметр [session] методу [install]
      get: () => session,
    })
  }
}

рядок 4: спільний об’єкт [session] буде доступний у властивості [$session] усіх компонентів;

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

Головний скрипт [main.js] має такий вигляд:


// імпортується
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'

// сесія
import session from './session';
import pluginSession from './plugins/pluginSession'
Vue.use(pluginSession, session)

// конфігурація
Vue.config.productionTip = false

// інстанціювання проєкту [App]
new Vue({
  name: "app",
  render: h => h(App),
}).$mount('#додаток')

рядки 14–16: плагін [pluginSession] інтегровано у фреймворк [Vue.js];
після рядка 16 атрибут [$session] доступний для всіх компонентів;

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

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


<template>
  <div class="container">
    <b-card>
      <!-- повідомлення -->
      <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>
      <!-- таблиця HTML -->
      <Table @updateTable="updateTable" :key="versionTable"/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // назва
  name: "app",
  // компоненти
  components: {
    Table
  },
  // внутрішній стан
  data() {
    return {
      // версія таблиці
      versionTable: 1
    };
  },

  // методи
  methods: {
    updateTable() {
      // eslint-disable-next-line
      console.log("App updateTable");
      // збільшення версії таблиці
      this.versionTable++;
    }
  }
};
</script>

Коментарі

погляд [App] більше не керує таблицею, що відображається компонентом [Table] у рядку 9;
рядок 9: компонент [Table] генерує подію [updateTable], яка вимагає перегенерації компонента [Table]. Один із способів зробити це — використати атрибут [:key]. Цьому атрибуту присвоюється значення, яке можна змінювати. Щоразу, коли воно змінюється, компонент [Table] перегенерується;
рядок 9: значення атрибута [:key] дорівнює значенню атрибута [versionTable] з рядка 27. Метод [updateTable] (рядки 33–38) відповідає за перегенерацію компонента [Table] із рядка 9. Для цього метод збільшує значення атрибута [:key] компонента [Table], рядок 37. Після цього компонент [Table] автоматично регенерується;

15.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" }
      ]
    };
  },
  // методи
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // видаляємо рядок
      this.$session.deleteLigne(index);
      // запитуємо батьківський компонент про оновлення подання
      this.$emit("updateTable");
    },
    // перезавантаження списку, що відображається
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // перегенерувати список симуляцій
      this.$session.generateLignes();
      // надсилається запит до батьківського компонента на оновлення подання
      this.$emit("updateTable");
    }
  }
};
</script>

Коментарі:

атрибут [lignes] (рядки 4, 12, 17) більше не є параметром, заданим батьківським компонентом, а є обчисленим атрибутом компонента [Table] (рядки 30–32). Отже, [lignes] — це масив [$session.lignes] (рядок 31);
рядки 49–56: метод [supprimerLigne] видаляє рядок із таблиці [$session.lignes]. За замовчуванням це видалення не впливає на відображення таблиці HTML. Адже елементи таблиці [$session] не є інтерактивними: їхні зміни не позначаються на компонентах, які їх використовують. З цієї причини компонент [Table] надсилає запит своєму батьківському компоненту на перегенерацію за допомогою події [updateTable] (рядок 55). Ми бачили, що батьківський компонент тоді збільшував атрибут [:key] компонента [Table], щоб змусити його перегенеруватися;
рядки 58–65: метод [rechargerListe] вимагає від об’єкта [$session] перегенерувати масив [$session.lignes]. З тієї ж причини, що й раніше, ця зміна в [$session.liste] за замовчуванням не впливає на відображення таблиці HTML. З цієї причини компонент [Table] запитує у свого батьківського об’єкта про його перегенерацію за допомогою події [updateTable] (рядок 64).

15.6. Виконання проекту

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