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

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

17.1. Instalação da dependência [vuex]

17.2. O script [./session.js]

O objeto [session] passa a ser o seguinte:


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

// a sessão é um store Vuex
const session = new Vuex.Store({
  state: {
    // a tabela de simulações
    lignes: []
  },
  mutations: {
    // geração da lista de simulações
    generateLignes(state) {
      // eslint-disable-next-line no-console
      console.log("mutation generateLignes");
      // inicialização de [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);
    },
    // remoção da linha n.º índice
    deleteLigne(state, index) {
      // eslint-disable-next-line no-console
      console.log("mutation deleteLigne");
      // elimina-se a linha n.º [index]
      state.lignes.splice(index, 1);
    }
  }
});
// exportação do objeto [session]
export default session;

Comentários

linhas 2-4: integra-se o plugin [Vuex] no framework [Vue];
linha 7: a sessão passa a ser um objeto do tipo [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 tabela de simulações [lignes] (linha 10);
linhas 12-35: a propriedade [mutations] reúne os métodos que alteram o conteúdo do objeto [state];
linhas 14-26: a propriedade [generateLignes] é uma função que gera um valor inicial para a propriedade [state.lignes]. Aqui, aceita [state] como parâmetro. Linhas 18-23: a propriedade [state.lignes] é inicializada;
linhas 28-35: a propriedade [deleteLigne] é uma função que elimina uma linha da tabela [state.lignes]. Tem como parâmetros:
- [state], que representa o objeto das linhas 8-11;
- [index], que é o número da linha a eliminar;
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 alteração;
linha 37: o objeto [session] é exportado.

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

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

O script principal evolui da seguinte forma:


// importações
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'

// sessão
import session from './session';

// configuração
Vue.config.productionTip = false

// instanciação do projeto [App]
new Vue({
  name: "app",
  // utilização do store do 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 denominado [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 se acedia à sessão através da notação [this.$session], agora aceder-se-á através da notação [this.$store];

17.4. A vista principal [App]

A vista principal [App] evolui da seguinte forma:


<template>
  <div class="container">
    <b-card>
      <!-- mensagem -->
      <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 {
  // nome
  name: "app",
  // componentes
  components: {
    Table
  },
  // ciclo de vida
  created() {
    // geração da tabela de simulações
    this.$store.commit("generateLignes");
  }
};
</script>

Comentários

linha 9: a vista [App] utiliza o componente [Table], mas já não recebe eventos deste, devido ao facto de o store [Vuex] ser reativo;
linhas 24-27: o método [created] é executado imediatamente após a criação do componente [App]. Neste, é executada a mutação denominada [generateLignes], que gera um valor inicial para a matriz de simulações. Note-se a sintaxe específica da instrução. Recorde-se que a notação [this.$store] faz referência à propriedade [store] da vista instanciada em [main.js]:


// instanciação da vista [App]
new Vue({
  name: "app",
  // utilização do store do Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

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

17.5. O componente [Table]

O componente [Table] evolui da seguinte forma:


<template>
  <div>
    <!-- lista vazia -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- botão de atualização-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- lista não vazia-->
    <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 de simulações -->
      <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 {
  // estado calculado
  computed: {
    lignes() {
      return this.$store.state.lignes;
    }
  },
  // estado interno
  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étodos
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // a linha é eliminada
      this.$store.commit("deleteLigne", index);
    },
    // recarregamento da lista apresentada
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // regenera a lista de simulações
      this.$store.commit("generateLignes");
    }
  }
};
</script>

Comentários

o [template] das linhas 1-24 não sofre alterações;
linhas 30-32: a propriedade calculada [lignes] utiliza agora o [store] do [Vuex];
linhas 49-54: para eliminar uma linha da tabela HTML, utiliza-se a mutação [deleteLigne] do [store] do [Vuex]. Passa-se como parâmetro o n.º [index] da linha a eliminar (linha 53);
linhas 56-61: para recarregar a tabela HTML com uma nova lista, utiliza-se a mutação [generateLignes] da [store] da [Vuex];

17.6. Conclusion

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