17. Projeto [vuejs-15]: Utilização do plugin [Vuex]

O projeto [vuejs-15] baseia-se no projeto [vuejs-14], utilizando um objeto [session] reativo gerado pelo [Vuex]. A estrutura do projeto é a seguinte:

17.1. Instalar a dependência [vuex]

17.2. O script [./session.js]

O objeto [session] fica assim:


// plugin Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
 
// la session est un store Vuex
const session = new Vuex.Store({
  state: {
    // le tableau des simulations
    lignes: []
  },
  mutations: {
    // génération de la liste des simulations
    generateLignes(state) {
      // eslint-disable-next-line no-console
      console.log("mutation generateLignes");
      // on initialise [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);
    },
    // suppression ligne n° index
    deleteLigne(state, index) {
      // eslint-disable-next-line no-console
      console.log("mutation deleteLigne");
      // on supprime la ligne n° [index]
      state.lignes.splice(index, 1);
    }
  }
});
// export de l'objet [session]
export default session;

Comentários

linhas 2-4: integramos o plugin [Vuex] na estrutura [Vue];
linha 7: a sessão torna-se um objeto [Vuex.Store];
linhas 8–11: a propriedade [state] contém o estado partilhado da aplicação [Vue]. Esta propriedade estará acessível a todos os componentes da aplicação. Aqui partilhamos a matriz de simulações [lines] (linha 10);
linhas 12–35: a propriedade [mutations] contém os métodos que modificam o conteúdo do objeto [state];
linhas 14–26: a propriedade [generateLines] é uma função que gera um valor inicial para a propriedade [state.lines]. Aqui, ela recebe [state] como parâmetro. Linhas 18–23: a propriedade [state.lines] é inicializada;
linhas 28–35: a propriedade [deleteLine] é uma função que remove uma linha da matriz [state.lines]. Os seus parâmetros são:
- [state], que representa o objeto das linhas 8–11;
- [index], que é o número da linha a ser eliminada;
as funções da propriedade [mutations] aceitam sempre como primeiro parâmetro um objeto que representa a propriedade [state] da linha 8. Os parâmetros seguintes são fornecidos pelo código que chama a mutação;
linha 37: o objeto [session] é exportado.

Ao contrário do projeto anterior [vuejs-13], não teremos aqui um plugin para tornar a sessão acessível aos componentes através de um atributo [Vue.$session].

17.3. O script principal [./main.js]

O script principal evolui da seguinte forma:


// imports
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'
 
// session
import session from './session';
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  name: "app",
  // utilisation store de Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

Comentários

linha 14: a sessão é importada;
linha 23: é passada para a vista principal num atributo chamado [store] (isto é obrigatório). Graças ao plugin [Vuex], este atributo fica então disponível para todos os componentes num atributo [Vue.$store]. Estamos, portanto, numa configuração muito semelhante à do projeto anterior: enquanto num componente acedíamos à sessão através da notação [this.$session], agora acederemos a ela através da notação [this.$store];

17.4. A vista principal [App]

A vista principal da [App] altera-se da seguinte forma:


<template>
  <div class="container">
    <b-card>
      <!-- message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation du plugin [Vuex]</h4>
      </b-alert>
      <!-- table HTML -->
      <Table />
    </b-card>
  </div>
</template>
 
<script>
import Table from "./components/Table";
export default {
  // nom
  name: "app",
  // composants
  components: {
    Table
  },
  // cycle de vie
  created() {
    // génération du tableau des simulations
    this.$store.commit("generateLignes");
  }
};
</script>

Comentários

linha 9: a vista [App] utiliza o componente [Table], mas já não recebe eventos deste, graças ao facto de o armazenamento [Vuex] ser reativo;
Linhas 24–27: O método [created] é executado imediatamente após a criação do componente [App]. Dentro deste método, é chamada a função [generateLines], que gera um valor inicial para a matriz de simulações. Repare na sintaxe específica da instrução. Recorde-se que a notação [this.$store] se refere à propriedade [store] da vista instanciada em [main.js]:


// instanciation vue [App]
new Vue({
  name: "app",
  // utilisation store de Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

A notação [this.$store] refere-se, portanto, ao objeto [session]. Em seguida, escrevemos [this.$store.commit("generateLines")] para executar a mutação denominada [generateLines]. Esta mutação é uma função;

17.5. O componente [Table]

O componente [Table] evolui da seguinte forma:


<template>
  <div>
    <!-- empty list -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- reload button-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- non-empty list-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- simulation table -->
      <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 {
  // état calculé
  computed: {
    lignes() {
      return this.$store.state.lignes;
    }
  },
  // état interne
  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" }
      ]
    };
  },
  // méthodes
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // on supprime la ligne
      this.$store.commit("deleteLigne", index);
    },
    // rechargement de la liste affichée
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // on régènère la liste des simulations
      this.$store.commit("generateLignes");
    }
  }
};
</script>

Comentários

o [template] para as linhas 1–24 permanece inalterado;
linhas 30–32: a propriedade calculada [lignes] utiliza agora o [store] do [Vuex];
linhas 49-54: para remover uma linha da tabela HTML, usamos a mutação [deleteLigne] do [store] do [Vuex]. Passamos o número [index] da linha a ser removida como parâmetro (linha 53);
linhas 56–61: para recarregar a tabela HTML com uma nova lista, usamos a mutação [generateLines] do [store] do [Vuex];

17.6. Conclusão

Os atributos [Vue.$session] no projeto [vuejs-13] e os atributos [Vue.$store] no projeto [vuejs-15] são muito semelhantes. Têm a mesma finalidade: partilhar informações entre vistas. A vantagem do objeto [store] é que ele é reativo, ao passo que o objeto [session] não o é. No entanto, o projeto [vuejs-14] demonstrou que é fácil tornar o objeto [session] reativo, duplicando-o nas propriedades reativas das vistas.