Qu'est-ce que Vuex ? Guide du débutant sur Vuex 4

Cet article vous présente Vuex et explique comment utiliser Vuex dans les applications. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Vuex est un outil essentiel dans l'écosystème Vue.js. Mais les développeurs qui découvrent Vuex peuvent être rebutés par des termes tels que « modèle de gestion d'état » et confus quant à la raison pour laquelle ils ont réellement besoin de Vuex. [Recommandations associées : "Tutoriel vue.js"]

Cet article est une introduction à Vuex. Bien sûr, il couvrira également les concepts avancés de Vuex et vous montrera comment utiliser Vuex. dans les candidatures.

Problèmes que Vuex résout

Pour comprendre Vuex, vous devez d'abord comprendre les problèmes qu'il résout.

Supposons que nous développions une application de chat multi-utilisateurs. L'interface dispose d'une liste d'utilisateurs, d'une fenêtre de discussion privée, d'une boîte de réception avec historique des discussions et d'une barre de notification qui informe l'utilisateur des messages non lus d'autres utilisateurs qui ne sont pas actuellement consultés.

Des millions d'utilisateurs discutent chaque jour avec des millions d'autres utilisateurs via notre application. Cependant, certaines personnes se sont plaintes d'un problème ennuyeux : le volet de notification donne parfois de fausses notifications. Les utilisateurs sont avertis d'un nouveau message non lu, mais lorsqu'ils le consultent, il s'agit simplement d'un message déjà consulté.

Ce que décrit cet auteur est une situation réelle que les développeurs de Facebook ont ​​rencontrée dans leur système de chat il y a quelques années. Pour résoudre ce problème, les développeurs créent une architecture d'application appelée "Flux". Flux constitue la base de Vuex, Redux et d'autres bibliothèques similaires.

Flux

Les développeurs de Facebook sont aux prises avec le problème des « notifications zombies » depuis un certain temps. Ils ont finalement réalisé que sa persistance était plus qu'un simple défaut : elle indiquait un défaut sous-jacent dans l'architecture de l'application.

Cette faille est la plus facile à comprendre de manière abstraite : lorsqu'il existe plusieurs composants dans une application qui partagent des données, la complexité de leurs interconnexions augmente au point que l'état des données ne peut pas être prédit ou compris. Par conséquent, l’application ne peut pas être étendue ou maintenue.

Flux est un modèle, pas une bibliothèque. Nous ne pouvons pas aller sur Github pour télécharger Flux. Il s'agit d'un modèle de conception similaire à MVC. Des bibliothèques comme Vuex et Redux implémentent le modèle Flux de la même manière que d'autres frameworks implémentent le modèle MVC.

En fait, Vuex n'implémente pas tout Flux, seulement un sous-ensemble. Mais ne vous inquiétez pas pour le moment, concentrons-nous sur la compréhension des principes clés qu'il suit.

Principe 1 : Source unique

Les composants peuvent disposer de données locales dont ils ont uniquement besoin de connaître. Par exemple, la position de la barre de défilement dans un composant liste d'utilisateurs peut être indépendante des autres composants.

Cependant, toutes les données qui doivent être partagées entre les composants (c'est-à-dire les données d'application) doivent être conservées dans un emplacement distinct, distinct des composants qui les utilisent.

Cet emplacement unique est appelé un « magasin ». Le composant doit lire les données de l'application à partir de cet emplacement et ne peut pas conserver sa propre copie pour éviter les conflits ou les divergences.

import { createStore } from "vuex";

// Instantiate our Vuex store
const store = createStore({

  // "State" 组件的应用程序数据
  
  state () {
    return {
      myValue: 0
    };
  }
});

// 组件从其计算的属性访问 state 
const MyComponent = {   
  template: "<div>{{ myValue }}</div>",
  computed: {
    myValue () {
      return store.state.myValue;
    }   
  } 
};

Principe 2 : Les données sont en lecture seule

les composants peuvent lire librement les données de store. Mais les données de store ne peuvent pas être modifiées, du moins pas directement.

Au lieu de cela, ils doivent informer store de leur intention de modifier les données, et store est responsable d'effectuer les modifications via un ensemble défini de fonctions (appelées mutation).

Pourquoi cette approche ? Si l'on centralise la logique de changement des données, alors si le statut est incohérent, il suffit de le vérifier au même endroit, sans aller dans chaque fichier spécifique. Nous minimisons la possibilité qu'un composant aléatoire (peut-être dans un module tiers) modifie les données de manière inattendue.

const store = createStore({ 
  state() { 
    return {
      myValue: 0
    };
  }, 
  mutations: { 
    increment (state, value) { 
      state.myValue += value;
    }
  } 
});
// 需要更新值吗？
// 错误的，不要直接更改 store 值
store.myValue += 10;
// 正确的，调用正确的 mutations。
store.commit('increment', 10);

Principe 3 : les mutations sont synchrones

Le débogage des incohérences des données est beaucoup plus facile si l'application implémente les deux principes ci-dessus dans son architecture. Il est possible de journaliser les commits et d'observer comment l'état change (cela est en effet possible en utilisant Vue Devtools).

Mais si notre mutation est appelé de manière asynchrone, cette capacité sera affaiblie. Nous connaissons l'ordre des soumissions, mais nous ne connaissons pas l'ordre dans lequel les composants les soumettent. La

Synchronisationmutation garantit que l'état ne dépend pas de la séquence et du timing imprévisibles des événements.

Tellement cool, alors qu'est-ce que Vuex exactement ?

Avec toutes ces connaissances de base, nous pouvons enfin résoudre le problème - Vuex est une bibliothèque qui nous aide à implémenter l'architecture Flux dans les applications Vue. En appliquant les principes ci-dessus, Vuex maintient les données de nos applications dans un état transparent et prévisible, même lorsque les données sont partagées entre plusieurs composants.

Maintenant que nous avons une compréhension de haut niveau de Vuex, voyons comment créer une application basée sur Vuex dans un projet réel.

Créez une liste de tâches à l'aide de Vuex

Pour démontrer l'utilisation de Vuex, nous avons mis en place une application de tâches simple. Vous pouvez accéder à des exemples fonctionnels du code ici.

示例地址：https://codesandbox.io/s/happ...

如果大家自己的电脑尝试一波，那么可以使用下面的命令：

vue create vuex-example

安装 Vuex

cd vuex-example
npm i -S vuex@4
npm run serve

创建一个 Vuex store

现在，创建 Vuex store，在项目中创建 src/store/index.js：

mkdir src/store
touch src/store/index.js

打开文件并导入createStore方法。此方法用于定义store及其特性。现在，我们导出该store ，以便在Vue应用中能访问它。

// src/store/index.js

import { createStore } from "vuex";

export default createStore({});

将 store 添加到 Vue 实例

为了可以从任何组件中访问 Vuex store，我们需要在主文件中导入 store 模块，并将store作为插件安装在主Vue实例上

// src/main.js

import { createApp } from "vue";
import App from "@/App";
import store from "@/store";

const app = createApp(App);

app.use(store);

app.mount("#app");

创建一个简单的应用程序

如上所述，Vuex 的重点是通常在大型应用程序中创建可扩展的全局状态。 但是，我们可以在一个简单的待办应用程序中演示其功能。

完成后效果如下所示：

现在，删除 HelloWorld 文件：

rm src/components/HelloWorld.vue

TodoNew.vue

现在，添加一个新组件 TodoNew，它负责创建新的待办事项。

touch src/components/TodoNew.vue

打开 TodoNew.vue 并输入以下内容：

// src/components/TodoNew.vue

<template>
  <form @submit.prevent="addTodo">
    <input
      type="text"
      placeholder="Enter a new task"
      v-model="task"
    />
  </form>
</template>

现在转到组件定义，有两个局部状态属性-task和给新待办事项提供唯一标识符的id。

// src/components/TodoNew.vue

<template>...</template>
<script>
export default {
  data() {
    return {
      task: "",
      id: 0
    };
  },
  methods: {
    addTodo: function() {
      //
    }
  }
};
</script>

定义 store 状态

过会，我们会创建一个显示待办事项的组件。 由于它和TodoNew组件都需要访问相同的数据，因此这是我们在 Vuex 存储中保存的全局state 的理想选择。

现在，回到state并定义属性状态。 这里使用 Vux4 提供的 createStore 函数，该函数返回一个对象。 该对象具有一个属性 todos，它是一个空数组。

// src/store/index.js
import { createStore } from "vuex";

export default createStore({
  state () {
    return {
      todos: []
    }
  }
});

定义 mutation

从原则2可以知道，Vuex state 不能直接更改，需要定义mutator函数。

现在，我们向store添加一个mutation属性，并添加一个函数属性addTodo。 所有mutator方法第一个参数。 第二个可选参数是 store，第二个是传递的数据。

// src/store/index.js

import { createStore } from "vuex";

export default createStore({
  state () {
    return {
      todos: []
    }
  },
  mutations: {
    addTodo (state, item) {
      state.todos.unshift(item);
    }
  }
});

使用 commit 调用 mutation

现在，可以在TodoNew组件中使用它，在 TodoNew组件定义一个addTodo方法。

要访问store ，我们可以使用全局属性this.$store。 使用commit方法创建一个新的mutation。 需要传递了两个参数-首先是mutation的名称，其次是我们要传递的对象，是一个新的待办事项（由id和task值组成）。

// src/components/TodoNew.vue
methods: {
  addTodo: function() {
    const { id, task } = this;
    this.$store.commit("addTodo", { id, task });
    this.id++;
    this.task = "";
  }
}

回顾

到目前为止：

• 用户将待办事项通过输入框输入，并绑定到 task 变量。

• 提交表单后，将调用addTodo方法

• 创建一个待办事项对象并将其“提交”到store中。

// src/components/TodoNew.vue
<template>
  <form @submit.prevent="addTodo">
    <input
      type="text"
      placeholder="Enter a new task"
      v-model="task"
    />
  </form>
</template>
<script>
export default {
  data() {
    return {
      task: "",
      id: 0
    };
  },
  methods: {
    addTodo: function() {
      const { id, task } = this;
      this.$store.commit("addTodo", { id, task });
      this.id++;
      this.task = "";
    }
  }
};
</script>

读取 store 数据

现在，我们已经创建了用于添加待办事项的功能。 接下来，就是把它们显示出来。

创建一个新组件TodoList.vue 文件。

touch src/components/TodoList.vue

内容如下：

// src/components/TodoList.vue
<template>
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.description }}
  </li>
</ul>
</template>

todos是一个计算属性，我们在其中返回Vuex store 的内容。

// src/components/TodoList.vue

<script>
export default {
  computed: {
    todos() {
      // 
    }
  }
};
</script>

定义 getters

与直接访问store 内容不同，getter是类似于存储的计算属性的函数。在将数据返回到应用程序之前，这些工具非常适合过滤或转换数据。

例如，下面有getTodos，它返回未过滤的状态。 在许多情况下，可以使用filter或map来转换此内容。

todoCount返回todo数组的长度。

通过确保组件愿意保留数据的本地副本，getter有助于实现原则1，即单一数据来源。

// src/store/index.js

export default createStore({
  ...
  getters: {
    getTodos (state) {
      return state.todos;
    },
    todoCount (state) {
      return state.todos.length;
    }
  }
})

返回TodoList组件，我们通过返回this.$store.getters.getTodos来完成功能。

// src/components/TodoList.vue

<script>
export default {
  computed: {
    todos() {
      return this.$store.getters.getTodos;
    }
  }
};
</script>

App.vue

要完成此应用程序，现在要做的就是导入并在App.vue中声明我们的组件。

// src/App.vue

<template>
  <p>
    <h1>To-Do List</h1>
    <p>
      <TodoNew />
      <TodoList />
    </p>
  </p>
</template>
<script>
import TodoNew from "@/components/TodoNew.vue";
import TodoList from "@/components/TodoList.vue";

export default {
  components: {
    TodoNew,
    TodoList
  }
};
</script>

你真的需要Vuex吗？

显然，在大型应用程序中，拥有全局状态管理解决方案将有助于让我们的应用程序可预测和可维护。

Mais pour des projets relativement petits, j'ai parfois l'impression qu'utiliser Vuex est excessif, et il est plus raisonnable que chacun suive les besoins réels.

Avantages de Vuex :

• État global facile à gérer
• État global de débogage puissant

Inconvénients de Vuex :

• Dépendances de projet supplémentaires
• Modèles encombrants

Anglais Adresse originale : https://vuejsdevelopers.com/2017/05/15/vue-js-what-is-vuex/

Auteur : Anthony Gore

Adresse de réimpression : https :/ /segmentfault.com/a/1190000039872016

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!