17. 项目 [vuejs-15]：使用 [Vuex] 插件

[vuejs-15] 项目在 [vuejs-14] 项目的基础上，使用了由 [Vuex] 生成的响应式 [session] 对象。项目结构如下：

17.1. 安装 [vuex] 依赖项

17.2. [./session.js] 脚本

[session] 对象变为如下形式：


// plugin Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
 
// la session est un store Vuex
const session = new Vuex.Store({
  state: {
    // le tableau des simulations
    lignes: []
  },
  mutations: {
    // génération de la liste des simulations
    generateLignes(state) {
      // eslint-disable-next-line no-console
      console.log("mutation generateLignes");
      // on initialise [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);
    },
    // suppression ligne n° index
    deleteLigne(state, index) {
      // eslint-disable-next-line no-console
      console.log("mutation deleteLigne");
      // on supprime la ligne n° [index]
      state.lignes.splice(index, 1);
    }
  }
});
// export de l'objet [session]
export default session;

注释

第 2-4 行：我们将 [Vuex] 插件集成到 [Vue] 框架中；
第 7 行：该会话成为一个 [Vuex.Store] 对象；
第 8–11 行：[state] 属性包含 [Vue] 应用程序的共享状态。该属性可供应用程序的所有组件访问。在此，我们共享了模拟数组 [lines]（第 10 行）；
第 12–35 行：[mutations] 属性包含用于修改 [state] 对象内容的方法；
第 14–26 行：[generateLines] 属性是一个函数，用于为 [state.lines] 属性生成初始值。此处，它将 [state] 作为参数。第 18–23 行：初始化 [state.lines] 属性；
第 28–35 行：[deleteLine] 属性是一个函数，用于从数组 [state.lines] 中移除一行。其参数为：
- [state]，代表第 8–11 行定义的对象；
- [index]，即待删除行的索引号；
[mutations] 属性的函数始终将第 8 行中的 [state] 属性对象作为第一个参数。后续参数由调用该变异操作的代码提供；
第 37 行：导出 [session] 对象。

与之前的项目 [vuejs-13] 不同，这里我们不会使用插件，因此组件无法通过 [Vue.$session] 属性访问会话。

17.3. 主脚本 [./main.js]

主脚本演变如下：


// imports
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'
 
// session
import session from './session';
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  name: "app",
  // utilisation store de Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

注释

第 14 行：导入会话；
第 23 行：将其作为名为 [store] 的属性传递给主视图（这是必需的）。得益于 [Vuex] 插件，该属性随后可通过 [Vue.$store] 属性在所有组件中使用。因此，我们的配置与前一个项目非常相似：在组件中，我们以前通过 [this.$session] 访问会话，现在将通过 [this.$store] 访问；

17.4. 主视图 [App]

[App] 的主视图将发生如下变化：


<template>
  <div class="container">
    <b-card>
      <!-- message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-14] : utilisation du plugin [Vuex]</h4>
      </b-alert>
      <!-- table HTML -->
      <Table />
    </b-card>
  </div>
</template>
 
<script>
import Table from "./components/Table";
export default {
  // nom
  name: "app",
  // composants
  components: {
    Table
  },
  // cycle de vie
  created() {
    // génération du tableau des simulations
    this.$store.commit("generateLignes");
  }
};
</script>

第 9 行：[App] 视图使用了 [Table] 组件，但由于 [Vuex] 存储是响应式的，因此不再接收来自该组件的事件；
第 24–27 行：[created] 方法在 [App] 组件创建后立即执行。在此方法中，调用了 [generateLines] 函数，该函数为 simulations 数组生成初始值。请注意该语句的特定语法。回顾一下，[this.$store] 表示 [main.js] 中实例化视图的 [store] 属性：


// instanciation vue [App]
new Vue({
  name: "app",
  // utilisation store de Vuex
  store: session,
  render: h => h(App),
}).$mount('#app')

因此，[this.$store] 表示 [session] 对象。接着，我们编写 [this.$store.commit("generateLines")] 来执行名为 [generateLines] 的变异操作。该变异操作是一个函数；

17.5. [Table] 组件

[Table] 组件的演变如下：


<template>
  <div>
    <!-- empty list -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- reload button-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- non-empty list-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- simulation table -->
      <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 {
  // état calculé
  computed: {
    lignes() {
      return this.$store.state.lignes;
    }
  },
  // état interne
  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éthodes
  methods: {
    supprimerLigne(index) {
      // eslint-disable-next-line
      console.log("Table supprimerLigne", index);
      // on supprime la ligne
      this.$store.commit("deleteLigne", index);
    },
    // rechargement de la liste affichée
    rechargerListe() {
      // eslint-disable-next-line
      console.log("Table rechargerListe");
      // on régènère la liste des simulations
      this.$store.commit("generateLignes");
    }
  }
};
</script>

第 1–24 行的 [template] 保持不变；
第 30–32 行：计算属性 [lignes] 现在使用来自 [Vuex] 的 [store]；
第 49–54 行：要从 HTML 表格中删除一行，我们使用 [Vuex] [store] 的 [deleteLigne] 突变。我们将要删除的行的 [index] 编号作为参数传递（第 53 行）；
第 56–61 行：为了使用新的列表重新加载 HTML 表格，我们使用 [Vuex] [store] 的 [generateLines] 突变；

17.6. 结论

[vuejs-13] 项目中的 [Vue.$session] 属性与 [vuejs-15] 项目中的 [Vue.$store] 属性非常相似。它们具有相同的功能：在视图之间共享信息。 [store] 对象的优势在于它是响应式的，而 [session] 对象则不是。不过，[vuejs-14] 项目展示了通过在视图的响应式属性中复制 [session] 对象，可以轻松使其具备响应式特性。