16. Project [vuejs-14]: Making the session reactive

We saw that the [session] object used in the previous project had non-reactive properties: if we modify them, the views using these properties are not updated. It is possible to have a reactive [session] object if we store it in the reactive data of the views. This is what the [vuejs-14] project demonstrates.

The project directory structure is as follows:

16.1. The [session] object

The [session] object shared by all components does not change.

16.2. The [./plugins/pluginSession] plugin

The [pluginSession] script does not change. The shared [session] object is available in the [$session] property of all components.

16.3. The main script [main.js]

The main script [main.js] remains unchanged.

16.4. The main view [App]

The [App] view is now as follows:

<template>
  <div class="container">
    <b-card>
      <!-- message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14]: Using an object shared between components</h4>
      </b-alert>
      <!-- HTML table -->
      <Table/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // name
  name: "app",
  // components
  components: {
    Table
  },
  // lifecycle
  created() {
    // generate the simulation table
    this.$session.generateLines();
  }
};
</script>

Comments

• line 9: the [Table] component no longer emits the [updateTable] event, which triggers the [Table] component to be regenerated. As a result, the [updateTable] method has been removed;

16.5. The [Table] component

The [Table] component evolves as follows:

<template>
  <div>
    <!-- empty list -->
    <template v-if="lines.length==0">
      <b-alert show variant="warning">
        <h4>Your list of simulations is empty</h4>
      </b-alert>
      <!-- reload button -->
      <b-button variant="primary" @click="reloadList">Reload list</b-button>
    </template>
    <!-- non-empty list-->
    <template v-if="lines.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>List of your simulations</h4>
      </b-alert>
      <!-- simulation table -->
      <b-table striped hover responsive :items="rows" :fields="fields">
        <template v-slot:cell(action)="row">
          <b-button variant="link" @click="deleteRow(row.index)">Delete</b-button>
        </template>
      </b-table>
    </template>
  </div>
</template>

<script>
export default {
  // computed state
  computed: {
    lines() {
      return this.session.lines;
    }
  },
  // internal state
  data() {
    return {
      fields: [
        { label: "#", key: "id" },
        { label: "Married", key: "married" },
        { label: "Number of children", key: "children" },
        { label: "Salary", key: "salary" },
        { label: "Tax", key: "tax" },
        { label: "", key: "action" }
      ],
      session: {}
    };
  },
  // lifecycle
  created(){
    this.session = this.$session
  },
  // methods
  methods: {
    deleteLine(index) {
      // eslint-disable-next-line
      console.log("Table deleteRow", index);
      // delete the row
      this.session.deleteLine(index);
    },
    // reload the displayed list
    reloadList() {
      // eslint-disable-next-line
      console.log("Table reloadList");
      // regenerate the list of simulations
      this.session.generateLines();
    }
  }
};
</script>

Comments:

• The new feature is in lines 49–51: when the view is created, the session [this.$session] is stored in the [session] property on line 45. Placed here, the [session] property is reactive;
• Lines 58 and 65: Instead of using [this.$session] to add or remove a row from the table, we use the reactive property [this.session];

16.6. Running the project

We get the same results as in the [vuejs-12] project.