16. 项目 [vuejs-14]：使会话具有响应性

我们看到，前一个项目中使用的 [session] 对象具有非响应式属性：如果修改这些属性，使用这些属性的视图将不会更新。如果将 [session] 对象存储在视图的响应式数据中，则可以使其具有响应式特性。项目 [vuejs-14] 正是对此进行了演示。

该项目的结构如下：

16.1. 对象 [session]

所有组件共用的 [session] 对象保持不变。

16.2. 插件 [./plugins/pluginSession]

脚本 [pluginSession] 保持不变。共享对象 [session] 可在所有组件的 [$session] 属性中访问。

16.3. 主脚本 [main.js]

主脚本 [main.js] 保持不变。

16.4. 主视图 [App]

视图 [App] 现如下所示：


<template>
  <div class="container">
    <b-card>
      <!-- 消息 -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation d'un objet partagé entre composants</h4>
      </b-alert>
      <!-- 表格 HTML -->
      <Table/>
    </b-card>
  </div>
</template>

<script>
import Table from "./components/Table";
export default {
  // 名称
  name: "app",
  // 组件
  components: {
    Table
  },
  // 生命周期
  created() {
    // 生成仿真表
    this.$session.generateLignes();
  }
};
</script>

注释

第 9 行：组件 [Table] 不再触发 [updateTable] 事件，该事件原本用于请求重新生成组件 [Table]。因此，方法 [updateTable] 已不复存在；

16.5. 组件 [Table]

组件 [Table] 的演变如下：


<template>
  <div>
    <!-- 空列表 -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- 刷新按钮-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- 非空列表-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- 模拟表 -->
      <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 {
  // 计算结果
  computed: {
    lignes() {
      return this.session.lignes;
    }
  },
  // 内部状态
  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" }
      ],
      session : {}
    };
  },
  // 生命周期
  created(){
    this.session=this.$session
  },
  // 方法
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // 删除该行
      this.session.deleteLigne(index);
    },
    // 重新加载显示列表
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // 重新生成模拟列表
      this.session.generateLignes();
    }
  }
};
</script>

注释：

新增内容位于第 49-51 行：当视图创建时，[this.$session] 会话将存储在第 45 行的 [session] 属性中。置于此处的 [session] 属性具有响应性；
第 58 行和第 65 行：不再使用 [this.$session] 来向表中添加/删除行，而是使用响应式属性 [this.session]；

16.6. 项目运行

结果与项目 [vuejs-12] 相同。