17. Proyecto [vuejs-15]: uso del complemento [Vuex]

El proyecto [vuejs-15] retoma el proyecto [vuejs-14] utilizando un objeto [session] reactivo generado por [Vuex]. La estructura del proyecto es la siguiente:

17.1. Instalación de la dependencia [vuex]

17.2. El script [./session.js]

El objeto [session] queda así:


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

// la sesión es un almacén Vuex
const session = new Vuex.Store({
  state: {
    // la tabla de simulaciones
    lignes: []
  },
  mutations: {
    // generación de la lista de simulaciones
    generateLignes(state) {
      // eslint-disable-next-line no-console
      console.log("mutation generateLignes");
      // se inicializa [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);
    },
    // eliminación de la línea n.º índice
    deleteLigne(state, index) {
      // eslint-disable-next-line no-console
      console.log("mutation deleteLigne");
      // se elimina la línea n.º [index]
      state.lignes.splice(index, 1);
    }
  }
});
// exportación del objeto [session]
export default session;

Comentarios

líneas 2-4: se integra el plugin [Vuex] en el framework [Vue];
línea 7: la sesión se convierte en un objeto de tipo [Vuex.Store];
líneas 8-11: la propiedad [state] contiene el estado compartido de la aplicación [Vue]. Esta propiedad será accesible para todos los componentes de la aplicación. Aquí compartimos la tabla de simulaciones [lignes] (línea 10);
líneas 12-35: la propiedad [mutations] agrupa los métodos que modifican el contenido del objeto [state];
líneas 14-26: la propiedad [generateLignes] es una función que genera un valor inicial para la propiedad [state.lignes]. Aquí admite [state] como parámetro. Líneas 18-23: se inicializa la propiedad [state.lignes];
líneas 28-35: la propiedad [deleteLigne] es una función que elimina una línea de la tabla [state.lignes]. Sus parámetros son:
- [state], que representa el objeto de las líneas 8-11;
- [index], que es el número de la línea que se va a eliminar;
las funciones de la propiedad [mutations] siempre admiten como primer parámetro un objeto que representa la propiedad [state] de la línea 8. Los siguientes parámetros son proporcionados por el código que llama a la mutación;
línea 37: se exporta el objeto [session].

A diferencia del proyecto anterior [vuejs-13], aquí no dispondremos de un complemento para hacer que la sesión sea accesible a los componentes en un atributo [Vue.$session].

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

El script principal evoluciona de la siguiente manera:


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

// complementos
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// sesión
import session from './session';

// configuración
Vue.config.productionTip = false

// instanciación del proyecto [App]
new Vue({
  name: "app",
  // uso del almacén de Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

Comentarios

línea 14: se importa la sesión;
línea 23: se pasa a la vista principal en un atributo denominado [store] (es obligatorio). Gracias al plugin [Vuex], este atributo queda entonces disponible para todos los componentes en un atributo [Vue.$store]. Por lo tanto, nos encontramos en una configuración muy similar a la del proyecto anterior: mientras que en un componente se accedía a la sesión mediante la notación [this.$session], ahora se accederá a ella mediante la notación [this.$store];

17.4. La vista principal [App]

La vista principal [App] evoluciona de la siguiente manera:


<template>
  <div class="container">
    <b-card>
      <!-- mensaje -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation du plugin [Vuex]</h4>
      </b-alert>
      <!-- tabla HTML -->
      <Table />
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // nombre
  name: "app",
  // componentes
  components: {
    Table
  },
  // ciclo de vida
  created() {
    // generación de la tabla de simulaciones
    this.$store.commit("generateLignes");
  }
};
</script>

Comentarios

línea 9: la vista [App] utiliza el componente [Table], pero ya no recibe eventos de este, gracias a que el almacén [Vuex] es reactivo;
líneas 24-27: el método [created] se ejecuta inmediatamente después de la creación del componente [App]. En este, se ejecuta la mutación denominada [generateLignes], que genera un valor inicial para la matriz de simulaciones. Cabe destacar la sintaxis particular de la instrucción. Recordemos que la notación [this.$store] hace referencia a la propiedad [store] de la vista instanciada en [main.js]:


// instanciación de vista [App]
new Vue({
  name: "app",
  // uso del almacén de Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

La notación [this.$store] designa, por tanto, el objeto [session]. A continuación, se escribe [this.$store.commit("generateLignes")] para ejecutar la mutación denominada [generateLignes]. Esta mutación es una función;

17.5. El componente [Table]

El componente [Table] evoluciona de la siguiente manera:


<template>
  <div>
    <!-- lista vacía -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- botón de recarga-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- lista no vacía-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- tabla de simulaciones -->
      <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);
      // se elimina la línea
      this.$store.commit("deleteLigne", index);
    },
    // recarga de la lista mostrada
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // se vuelve a generar la lista de simulaciones
      this.$store.commit("generateLignes");
    }
  }
};
</script>

Comentarios

el [template] de las líneas 1-24 no cambia;
líneas 30-32: la propiedad calculada [lignes] utiliza ahora el [store] de [Vuex];
líneas 49-54: para eliminar una línea de la tabla HTML, se utiliza la mutación [deleteLigne] de [store] de [Vuex]. Se pasa como parámetro el n.º [index] de la línea que se va a eliminar (línea 53);
líneas 56-61: para recargar la tabla HTML con una nueva lista, se utiliza la mutación [generateLignes] de [store] de [Vuex];

17.6. Conclusion

Los atributos [Vue.$session] del proyecto [vuejs-13] y [Vue.$store] del proyecto [vuejs-15] son muy similares entre sí. Tienen el mismo objetivo: compartir información entre vistas. La ventaja del objeto [store] es que es reactivo, mientras que el objeto [session] no lo es. Sin embargo, el proyecto [vuejs-14] ha demostrado que es fácil hacer reactivo el objeto [session] duplicándolo en las propiedades reactivas de las vistas.