Comment utiliser Vuex pour la gestion des données et le partage d'état ?

Vuex est une bibliothèque de gestion d'état spécialement conçue pour Vue.js. Elle peut nous aider à simplifier le transfert et la gestion des données entre les composants et à améliorer la maintenabilité et l'évolutivité des applications. Cet article présentera comment utiliser Vuex pour la gestion des données et le partage d'état, dans l'espoir d'aider tout le monde à mieux comprendre et appliquer Vuex.

1. Qu'est-ce que Vuex ?

Vuex est la bibliothèque de gestion d'état officiellement fournie par Vue.js. Elle utilise un stockage centralisé pour gérer l'état de tous les composants de l'application, et utilise les règles correspondantes pour assurer la cohérence de l'état. Dans Vuex, nous pouvons gérer nos données et notre état via le magasin. Le magasin comprend les concepts de base suivants :

• state : données d'état, utilisées pour stocker chaque élément dans l'application. ;
• getter : lire les attributs calculés, utilisé pour dériver certaines valeurs d'état du magasin
• mutation : modifier l'état de manière synchrone, utilisé pour modifier l'état dans l'état ; Les données sont modifiées de manière synchrone ;
• action : statut de modification asynchrone, utilisé pour traiter les opérations asynchrones et soumettre des mutations
• module : modulaire, utilisé pour diviser les grands magasins en sous-modules plus petits et les gérer ; leur état et leurs opérations séparément.

2. Pourquoi avez-vous besoin de Vuex ?

Dans les applications Vue.js, à mesure que le niveau des composants continue d'augmenter, le transfert de données et d'état entre les composants deviendra de plus en plus complexe. À l'heure actuelle, nous avons besoin d'une bibliothèque de gestion d'état pour nous aider à gérer. et partagez diverses valeurs d'état dans l'application. L'utilisation de Vuex peut apporter les avantages suivants :

1. Gestion centralisée de l'état : chaque composant peut accéder au même arbre d'état, ce qui rend la gestion de l'état plus unifiée et centralisée
2.  ; Facile à maintenir et à déboguer : Vuex peut nous aider à mieux comprendre l'état et le flux de données de l'application, facilitant ainsi le débogage et la maintenance
3. Améliorer la lisibilité et la lisibilité du code Maintenabilité : en utilisant Vuex, vous pouvez ; concentrer le flux de contrôle des données en un seul endroit, rendant la logique du code plus claire et plus facile à maintenir
4. Séparer la logique métier et la gestion de l'état : en stockant l'état dans le magasin Vuex, la séparation des composants de la logique métier ; et des composants de gestion d'état peuvent être réalisés pour faciliter la maintenance et la gestion.

3. Comment utiliser Vuex ?

Avant d'utiliser Vuex, vous devez installer la bibliothèque Vuex et l'introduire dans le projet Vue :

npm install vuex --save

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

Ensuite, nous devons créer une boutique Vuex et l'enregistrer dans le Instance Vue , comme suit :

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    evenOrOdd(state) {
      return state.count % 2 === 0 ? 'even' : 'odd'
    }
  }
})

new Vue({
  el: '#app',
  store,
  computed: {
    count() {
      return this.$store.state.count
    },
    evenOrOdd() {
      return this.$store.getters.evenOrOdd
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.commit('decrement')
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
})

Dans le code ci-dessus, nous avons créé un magasin Vuex contenant trois concepts de base (état, mutations et actions). Parmi eux, l'état est utilisé pour stocker les données d'état, les mutations sont utilisées pour modifier l'état de manière synchrone et les actions sont utilisées pour gérer les opérations asynchrones et soumettre des mutations. Ici, nous définissons également un getter qui calcule si la valeur de comptage dans l'état est paire ou impaire.

Dans l'instance Vue, nous utilisons l'attribut calculé et l'attribut méthodes pour accéder à l'état, à la mutation et à l'action dans le magasin. count et evenOrOdd dans l'attribut calculé sont calculés sur la base des données réelles de l'état, tandis que l'incrément, la décrémentation et l'incrémentAsync dans l'attribut méthodes sont des méthodes utilisées pour modifier l'état.

4. L'utilisation de l'état et de la mutation

State est un concept central de Vuex. Il est utilisé pour stocker diverses valeurs d'état dans l'application, qui doivent généralement être stockées. être modifié par mutation. Dans Vuex, nous pouvons accéder et modifier l'état des manières suivantes :

1. Accès à l'état : Nous pouvons accéder à l'état dans le magasin via this.$store.state, comme ci-dessus Le décompte dans le l'exemple de code est un état.
2. Modifier directement l'état :
   La modification directe de l'état entraînera le signalement d'une erreur par l'outil d'analyse statique Vuex, car le principe de Vuex est que les modifications des données dans le magasin doivent passer par des mutations. Si nous devons modifier directement la valeur de state, nous devons utiliser Vue.set pour que la modification puisse déclencher les mises à jour de l'interface utilisateur de manière réactive. L'exemple de code est le suivant :

Vue.set(state.obj, 'newProp', 123)

#🎜. 🎜#Modifier l'état par mutation :
3. mutations est une collection utilisée pour modifier l'état, qui est une opération synchrone dans Vuex. En exécutant des mutations, nous pouvons modifier arbitrairement les valeurs de l'état. Les mutations sont le seul moyen de modifier l'état dans Vuex. Les opérations asynchrones ou autres effets secondaires ne peuvent pas être effectués dans les mutations. Nous pouvons soumettre des mutations des manières suivantes :
   

this.$store.commit('increment')   // 传入 mutation 的名称
this.$store.commit({
  type: 'increment',
  amount: 10    // 传入额外的参数
})

4 L'utilisation d'actions et de getters

Dans les applications, nous devons parfois effectuer une opération asynchrone, dans ce cas, nous pouvons utiliser des actions pour le gérer. Les actions peuvent contenir n'importe quelle opération asynchrone. Enfin, nous devons modifier les données dans l'état en soumettant une mutation. Dans Vuex, nous pouvons opérer des actions des manières suivantes :

Définir l'action :

actions: {
  incrementAsync(context) {
    setTimeout(() => {
      context.commit('increment')
    }, 1000)
  }
}

Soumettre l'action : #🎜🎜 #

2. this.$store.dispatch('incrementAsync')

Dans Vuex, les getters peuvent être considérés comme des propriétés calculées dans le magasin. Ce sont des valeurs d'état dérivées de l'état du magasin, qui peuvent gérer un grand nombre de répétitions et une logique complexe. . Les calculs sont mis en cache. Dans Vuex, nous pouvons utiliser les getters des manières suivantes :

Définir les getters :

1. getters: {
     evenOrOdd(state) {
       return state.count % 2 === 0 ? 'even' : 'odd'
     }
   }

Accéder aux getters : #🎜 🎜 #

this.$store.getters.evenOrOdd

2. 5. Utilisation du module

在 Vuex 中，如果我们的应用程序中存在大量的 state 和 mutations、actions 和 getters，单独存放到一个 store 中会极大地增加代码的复杂性和维护难度，此时我们可以使用 module 在 Vuex 中进行模块化管理。在 using module 模式中，每个模块都拥有自己的 state、mutations、actions 和 getters，从而让代码更加清晰明了、易于维护。使用 module 的方法和常规的 Vuex store 相似，只是需要在 Vuex.Store() 中添加模块，如下所示：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})

如上代码所示，我们创建了一个名为 moduleA 的模块，然后在 store 中通过 modules 选项将其添加到了 Vuex 的 store 中。在组件中访问模块的 state、mutations、actions 和 getters，和访问常规的 Vuex store 中的一样，只需要在前面加上模块名即可，例如：

computed: {
  ...mapState('a', {
    count: state => state.count
  }),
  ...mapGetters('a', [
    'evenOrOdd'
  ])
},
methods: {
  ...mapMutations('a', [
    'increment'
  ]),
  ...mapActions('a', [
    'incrementAsync'
  ])
}

在组件中，使用 mapState、mapMutation、mapActions 和 mapGetters 进行访问和操作，可以更加方便和快捷地操作和维护模块的状态和数据。

六、总结

本文简要介绍了 Vue.js 的状态管理库 Vuex 的使用方法和常用场景，包括 state、mutation、action、getter 和 module 等几个核心概念的使用。Vuex 可以帮助我们有效地管理和共享应用程序中的各种状态值，提高代码的可维护性和可扩展性。在使用 Vuex 的过程中，我们还需要注意一些细节和坑点，如同步和异步操作、state 和 mutation 的使用规范等问题，需要认真掌握和注意。

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!