17. Projeto [vuejs-15]: uso do plugin [Vuex]
O projeto [vuejs-15] dá continuidade ao 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 do 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");
// inicializando [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");
// a linha n.º [index] foi removida
state.lignes.splice(index, 1);
}
}
});
// exportação do objeto [session]
export default session;
Comentários
- linhas 2-4: integra-se o plugin [Vuex] ao 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 compartilhado do aplicativo [Vue]. Essa propriedade estará acessível a todos os componentes do aplicativo. Aqui, compartilhamos a matriz de simulações [lignes] (linha 10);
- linhas 12-35: a propriedade [mutations] reúne os métodos que modificam 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]. Ela recebe aqui [state] como parâmetro. Linhas 18-23: a propriedade [state.lignes] é inicializada;
- linhas 28-35: a propriedade [deleteLigne] é uma função que remove uma linha da tabela [state.lignes]. Ela tem como parâmetros:
- [state], que representa o objeto das linhas 8 a 11;
- [index], que é o número da linha a ser excluída;
- as funções da propriedade [mutations] sempre aceitam como primeiro parâmetro um objeto que representa a propriedade [state] da linha 8. Os parâmetros a seguir são fornecidos pelo código que chama a modificaçã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 em um atributo [Vue.$session].
17.3. O script principal [./main.js]
O script principal é modificado da seguinte forma:
// importações
import Vue from 'vue'
import App from './App.vue'
// plug-ins
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",
// uso do store do Vuex
store: session,
render: h => h(App),
}).$mount('#app')
Comentários
- linha 14: a sessão é importada;
- linha 23: ela é passada para a visualização principal em um atributo chamado [store] (isso é obrigatório). Graças ao plugin [Vuex], esse atributo fica então disponível para todos os componentes em um atributo [Vue.$store]. Estamos, portanto, em uma configuração muito semelhante à do projeto anterior: enquanto antes, em um componente, acessávamos a sessão por meio da notação [this.$session], agora a acessaremos por meio da notação [this.$store];
17.4. A visualização principal [App]
A visualização principal [App] sofre as seguintes alterações:
<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 visualização [App] utiliza o componente [Table], mas não recebe mais eventos dele, devido ao fato de que o store [Vuex] é reativo;
- linhas 24-27: o método [created] é executado logo após a criação do componente [App]. Nele, é executada a mutação denominada [generateLignes], que gera um valor inicial para a matriz de simulações. Observe-se a sintaxe específica da instrução. Vale lembrar que a notação [this.$store] refere-se à propriedade [store] da vista instanciada em [main.js]:
// instanciação da visualização [App]
new Vue({
name: "app",
// uso 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]. Essa mutação é uma função;
17.5. O componente [Table]
O componente [Table] evolui da seguinte maneira:
<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 é removida
this.$store.commit("deleteLigne", index);
},
// recarregamento da lista exibida
rechargerListe() {
// eslint-disable-next-line
console.log("Table rechargerListe");
// regenera-se a lista de simulações
this.$store.commit("generateLignes");
}
}
};
</script>
Comentários
- o [template] das linhas 1 a 24 não sofre alterações;
- linhas 30-32: a propriedade calculada [lignes] passa a utilizar o [store] do [Vuex];
- linhas 49-54: para excluir uma linha da tabela HTML, utiliza-se a mutação [deleteLigne] do [store] do [Vuex]. Passa-se como parâmetro o número [index] da linha a ser excluída (linha 53);
- linhas 56-61: para recarregar a tabela HTML com uma nova lista, utiliza-se a mutação [generateLignes] do [store] do [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. Eles têm o mesmo objetivo: compartilhar informações entre visualizações. A vantagem do objeto [store] é ser responsivo, enquanto o objeto [session] não o é. Mas o projeto [vuejs-14] demonstrou que era fácil tornar o objeto [session] reativo, duplicando-o nas propriedades reativas das visualizações.