Qu'est-ce que la gestion d'état Vuex dans Vue et comment l'utiliser ?

Qu'est-ce que la gestion d'état Vuex dans Vue et comment l'utiliser ?

Vue est un framework front-end populaire. Sa facilité d'utilisation et ses fonctions puissantes le rendent largement utilisé dans les projets. À mesure que les projets front-end deviennent plus vastes et plus complexes, la gestion des données devient de plus en plus difficile à maintenir. À cette époque, la gestion des statuts devient particulièrement importante. Vuex, en tant qu'outil de gestion d'état de Vue, peut nous aider à mieux organiser et gérer l'état des applications et à améliorer la maintenabilité du code. Cet article présentera les concepts de base et l'utilisation de la gestion d'état Vuex, et aidera les lecteurs à comprendre le rôle et l'application pratique de la gestion d'état Vuex.

1. Concepts de base de la gestion de l'état Vuex

1. State

Le stockage d'état est la partie centrale de Vuex, utilisée pour stocker l'état partagé entre les composants. La structure des données de l'État peut être un tableau, un objet, etc., contrairement aux données des composants, les données de l'État sont globales. Les données dans State seront gérées par des objets Store et pourront être facilement accessibles et exploitées dans le projet.

2. Getter

Getter peut être considéré comme la propriété calculée de State. Dans le composant, vous pouvez accéder aux variables de l'objet State via Getter définit certaines fonctions de calcul réutilisables pour obtenir les données dans State, ce qui est équivalent. à Vue. attribut calculé dans . L'utilisation de Getters dans la gestion d'état peut encapsuler une logique de calcul complexe et faciliter le partage et la réutilisation entre plusieurs composants.

3. Mutation

Mutation définit certaines fonctions pour mettre à jour l'état et modifier les données dans l'état. Il ne peut effectuer que des opérations synchrones. Étant donné que les modifications apportées à l'État doivent passer par Mutation, cela garantit que les modifications apportées aux données peuvent être suivies et que l'État peut être mis à jour en temps réel. L'utilisation de Mutation est également très simple. Il suffit d'appeler la méthode $store.commit dans le composant et de transmettre le nom de Mutation correspondant.

4. Action

Action est une opération asynchrone qui gère la logique métier. Elle peut inclure toute opération asynchrone, telle qu'une requête HTTP, setTimeout ou d'autres opérations asynchrones. Lorsqu'une opération asynchrone est requise, l'action sera soumise à la mutation et la mutation effectuera une opération synchrone pour mettre à jour l'état. La différence entre Action et Mutation est que Action peut contenir des opérations asynchrones. Les actions peuvent également appeler d'autres actions et mutations.

5. Module

Module nous permet de diviser le Store en modules, et chaque module peut avoir ses propres méthodes State, Mutation, Action et Getter. Cela peut rendre le Store plus organisé, améliorer la lisibilité du code et faciliter la collaboration en équipe. Le mécanisme de modularité de Vuex est similaire à la modularité d'ES6. Grâce à la modularité, vous pouvez facilement étendre et modifier le Store.

2. Comment utiliser la gestion d'état Vuex

1. Installer et référencer Vuex

Vous devez installer et référencer Vuex avant d'utiliser Vuex.

Méthode d'installation :

npm install vuex --save

Méthode de référence :

import Vuex from 'vuex'
Vue.use(Vuex)

2. Créer un magasin

Lors de l'utilisation de la gestion de l'état Vuex, nous devons d'abord créer un objet Store, qui doit être un shell pour contenir l'état de l'ensemble de l'application. La création d'un objet Store est également très simple. Il vous suffit de combiner les modules State, Mutation, Action, Getter et d'autres.

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

Vue.use(Vuex)

// 定义应用的初始状态
const state = {
  count: 0
}

// 定义 Mutation，处理 State
const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

// 定义 Action，处理异步操作
const actions = {
  incrementAction ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

// 定义 Getter，获取 State 中的数据
const getters = {
  getCount: state => state.count
}

// 创建 Store 对象
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

3. Utiliser le magasin dans les composants

Une fois le magasin créé, il peut être utilisé dans les composants. La méthode d'utilisation de Store dans un composant consiste à l'appeler via this.$store.xxx, où xxx peut être un état, une mutation, une action ou un getter.

<template>
  <div>
    <p>当前的数字为：{{count}}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.getters.getCount
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  }
}
</script>

4. Utilisation du module dans les composants

Lorsque l'application devient de plus en plus grande, l'utilisation de State, Mutation, Action et Getter devient un peu compliquée. Afin de mieux organiser le code, nous pouvons les fusionner dans un Module.

const appModule = {
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  },
  actions: {
    incrementAction ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount: state => state.count
  }
}

export default new Vuex.Store({
  modules: {
    appModule: appModule
  }
})

Ensuite, il peut être utilisé comme ceci dans le composant :

<template>
  <div>
    <p>当前的数字为：{{count}}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.getters['appModule/getCount']
    }
  },
  methods: {
    increment () {
      this.$store.commit('appModule/increment')
    },
    decrement () {
      this.$store.commit('appModule/decrement')
    }
  }
}
</script>

Ce qui précède est l'introduction de la gestion de l'état Vuex dans cet article, j'espère que cela sera utile aux lecteurs. Dans les applications pratiques, l'importance de la gestion de l'état ne peut être ignorée. Une utilisation appropriée de Vuex peut rendre le développement plus efficace et plus fluide.

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!