17. Projekt [vuejs-15]: wykorzystanie wtyczki [Vuex]

Projekt [vuejs-15] opiera się na projekcie [vuejs-14], wykorzystując obiekt reaktywny [session] wygenerowany przez [Vuex]. Struktura drzewa projektu przedstawia się następująco:

17.1. Instalacja zależności [vuex]

17.2. Skrypt [./session.js]

Obiekt [session] przyjmuje następujący kształt:

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

// sesja jest magazynem Vuex
const session = new Vuex.Store({
  state: {
    // tablica symulacji
    lignes: []
  },
  mutations: {
    // generowanie listy symulacji
    generateLignes(state) {
      // eslint-disable-next-line no-console
      console.log("mutation generateLignes");
      // inicjujemy [state.lignes]
      state.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 }
        ];
      // eslint-disable-next-line no-console
      console.log(state.lignes);
    },
    // usunięcie wiersza nr indeks
    deleteLigne(state, index) {
      // eslint-disable-next-line no-console
      console.log("mutation deleteLigne");
      // usuwamy wiersz nr [index]
      state.lignes.splice(index, 1);
    }
  }
});
// eksport obiektu [session]
export default session;

Komentarze

• wiersze 2–4: wbudowujemy wtyczkę [Vuex] do frameworka [Vue];
• wiersz 7: sesja staje się obiektem typu [Vuex.Store];
• wiersze 8–11: właściwość [state] zawiera wspólny stan aplikacji [Vue]. Właściwość ta będzie dostępna dla wszystkich komponentów aplikacji. W tym miejscu udostępniamy tablicę symulacji [lignes] (wiersz 10);
• wiersze 12–35: właściwość [mutations] zawiera metody modyfikujące zawartość obiektu [state];
• wiersze 14–26: właściwość [generateLignes] jest funkcją generującą wartość początkową dla właściwości [state.lignes]. Przyjmuje ona tutaj [state] jako parametr. Wiersze 18–23: właściwość [state.lignes] jest inicjowana;
• wiersze 28–35: właściwość [deleteLigne] jest funkcją usuwającą wiersz z tablicy [state.lignes]. Jej parametrami są:
  • [state], który reprezentuje obiekt z wierszy 8–11;
  • [index], czyli numer wiersza do usunięcia;
• funkcje właściwości [mutations] zawsze przyjmują jako pierwszy parametr obiekt reprezentujący właściwość [state] z wiersza 8. Kolejne parametry są dostarczane przez kod wywołujący mutację;
• wiersz 37: eksportowany jest obiekt [session].

W przeciwieństwie do poprzedniego projektu [vuejs-13] nie będziemy tutaj korzystać z wtyczki umożliwiającej komponentom dostęp do sesji za pośrednictwem atrybutu [Vue.$session].

17.3. Główny skrypt [./main.js]

Główny skrypt zmienia się w następujący sposób:

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

// wtyczki
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';

// konfiguracja
Vue.config.productionTip = false

// instancjonowanie projektu [App]
new Vue({
  name: "app",
  // korzystanie z magazynu danych Vuex
  store: session,
  render: h => h(App),
}).$mount('#aplikacja')

Komentarze

• wiersz 14: sesja jest importowana;
• wiersz 23: jest ona przekazywana do widoku głównego w atrybucie o nazwie [store] (jest to wymóg). Dzięki wtyczce [Vuex] atrybut ten staje się następnie dostępny dla wszystkich komponentów w atrybucie [Vue.$store]. Mamy więc do czynienia z konfiguracją bardzo zbliżoną do tej z poprzedniego projektu: tam, gdzie w komponencie uzyskiwano dostęp do sesji za pomocą notacji [this.$session], teraz będzie to możliwe za pomocą notacji [this.$store];

17.4. Widok główny [App]

Widok główny [App] zmienia się w następujący sposób:

<template>
  <div class="container">
    <b-card>
      <!-- komunikat -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation du plugin [Vuex]</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.$store.commit("generateLignes");
  }
};
</script>

Uwagi

• wiersz 9: widok [App] korzysta z komponentu [Table], ale nie otrzymuje już od niego zdarzeń, co wynika z faktu, że magazyn [Vuex] jest reaktywny;
• wiersze 24–27: metoda [created] jest wykonywana zaraz po utworzeniu komponentu [App]. W ramach tej metody wykonywana jest mutacja o nazwie [generateLignes], która generuje wartość początkową dla tablicy symulacji. Należy zwrócić uwagę na specyficzną składnię tej instrukcji. Przypominamy, że notacja [this.$store] odnosi się do właściwości [store] widoku zainicjowanego w [main.js]:

// instancjonowanie widoku [App]
new Vue({
  name: "app",
  // korzystanie z pamięci podręcznej Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

Notacja [this.$store] oznacza zatem obiekt [session]. Następnie wpisujemy [this.$store.commit("generateLignes")], aby wykonać mutację o nazwie [generateLignes]. Ta mutacja jest funkcją;

17.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.$store.state.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.$store.commit("deleteLigne", index);
    },
    // odświeżanie wyświetlanej listy
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // regeneracja listy symulacji
      this.$store.commit("generateLignes");
    }
  }
};
</script>

Uwagi

• [template] w wierszach 1–24 pozostaje bez zmian;
• wiersze 30–32: właściwość obliczeniowa [lignes] wykorzystuje teraz [store] z [Vuex];
• wiersze 49–54: aby usunąć wiersz z tabeli HTML, stosuje się mutację [deleteLigne] z [store] z [Vuex]. Jako parametr podaje się numer [index] wiersza, który ma zostać usunięty (wiersz 53);
• wiersze 56–61: aby ponownie załadować tabelę HTML z nową listą, stosuje się mutację [generateLignes] z [store] z [Vuex];

17.6. Conclusion

Atrybuty [Vue.$session] projektu [vuejs-13] oraz [Vue.$store] projektu [vuejs-15] są do siebie bardzo zbliżone. Służą one temu samemu celowi: wymianie informacji między widokami. Zaletą obiektu [store] jest to, że jest responsywny, podczas gdy obiekt [session] nie jest. Jednak projekt [vuejs-14] wykazał, że łatwo jest uczynić obiekt [session] reaktywnym poprzez zduplikowanie go w reaktywnych właściwościach widoków.