Explication détaillée de l'utilisation du gestionnaire d'état Vuex 4 dans Vue 3 pour réaliser un partage global de données

Vue 3 est un framework JavaScript populaire couramment utilisé pour créer des interfaces utilisateur. Il peut être facilement combiné avec le gestionnaire d'état Vuex pour un partage global de données. Cet article approfondira l'utilisation de Vuex 4, la nouvelle version de Vue 3, pour aider les développeurs à mieux comprendre et appliquer ce puissant outil de gestion d'état.

Tout d'abord, nous devons installer Vuex 4. Dans un projet Vue 3, vous pouvez utiliser la commande npm ou Yarn pour installer la dernière version de Vuex. Une fois l'installation de

npm install vuex@next

ou

yarn add vuex@next

terminée, importez le module Vuex dans le fichier d'entrée de Vue 3 et utilisez la fonction createApp pour créer une instance d'application Vue. createApp函数创建Vue应用程序实例。

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore({
  // 这里定义Vuex的状态和操作
})

const app = createApp(App)
app.use(store)
app.mount('#app')

在上述代码中，我们使用createStore函数创建了一个Vuex的store实例，并将其作为插件使用，以便在整个应用程序中使用Vuex进行状态管理。

接下来，让我们了解Vuex 4中最重要的两个概念：状态（state）和操作（mutation）。

状态是应用程序中的数据源，可以在任何组件中访问。操作是用于修改状态的方法，它们通过同步的方式来改变状态。在Vuex 4中，状态和操作都是使用纯函数的方式来定义的。

例如，我们可以在Vuex中定义一个counter状态和一个increment操作。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})

在上述代码中，我们定义了一个初始状态counter为0，并且定义了一个名为increment的操作，它可以通过state.counter++来增加计数器的值。

在组件中使用Vuex的状态和操作非常简单。可以通过$store对象来访问状态和操作。

export default {
  methods: {
    incrementCounter() {
      this.$store.commit('increment')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}

在上述代码中，我们通过commit方法来触发increment操作，并使用state方法来获取counter状态的当前值。

除了状态和操作，Vuex 4还引入了新的特性：动作（action）和getter。

动作是通过异步方式来操作状态的函数。在Vuex 4中，可以通过actions属性来定义动作。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在上述代码中，我们定义了一个名为asyncIncrement的动作，它通过setTimeout函数来模拟异步操作，并在1秒后触发increment操作。

Getter是用于获取状态的计算属性。在Vuex 4中，可以通过getters属性来定义getter。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  getters: {
    doubleCounter(state) {
      return state.counter * 2
    }
  }
})

在上述代码中，我们定义了一个名为doubleCounter的getter，它返回counter状态的两倍。

在组件中使用动作和getter与使用操作和状态类似。可以通过$store.dispatch方法来触发动作，并通过$store.getters属性来获取getter的值。

export default {
  methods: {
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    },
    doubleCounter() {
      return this.$store.getters.doubleCounter
    }
  }
}

在上述代码中，我们通过this.$store.dispatch方法来触发asyncIncrement动作，并通过this.$store.getters.doubleCounter来获取doubleCounterrrreee

Dans le code ci-dessus, nous utilisons la fonction createStore pour créer une instance de magasin Vuex et l'utiliser comme plug-in pour utiliser Vuex pour la gestion de l'état dans toute l'application.

Ensuite, comprenons les deux concepts les plus importants dans Vuex 4 : l'état et la mutation. 🎜🎜State est une source de données dans l'application et est accessible dans n'importe quel composant. Les opérations sont des méthodes utilisées pour modifier l'état. Elles changent d'état de manière synchrone. Dans Vuex 4, les états et les opérations sont définis à l'aide de fonctions pures. 🎜🎜Par exemple, nous pouvons définir un état counter et une opération increment dans Vuex. 🎜rrreee🎜Dans le code ci-dessus, nous définissons un état initial counter comme 0, et définissons une opération nommée increment, qui peut être transmise à state counter++code> pour incrémenter la valeur du compteur. 🎜🎜Utiliser les états et les actions Vuex dans les composants est très simple. L'état et les opérations sont accessibles via l'objet <code>$store. 🎜rrreee🎜Dans le code ci-dessus, nous déclenchons l'opération increment via la méthode commit, et utilisons la méthode state pour obtenir le compteurcode>La valeur actuelle du statut. 🎜🎜En plus des états et des opérations, Vuex 4 introduit également de nouvelles fonctionnalités : les actions et les getters. 🎜🎜Les actions sont des fonctions qui fonctionnent sur un état de manière asynchrone. Dans Vuex 4, les actions peuvent être définies via l'attribut actions. 🎜rrreee🎜Dans le code ci-dessus, nous définissons une action nommée asyncIncrement, qui simule des opérations asynchrones via la fonction setTimeout et déclenche après 1 seconde d'incrément opération. 🎜🎜Getter est une propriété calculée utilisée pour obtenir l'état. Dans Vuex 4, les getters peuvent être définis via l'attribut getters. 🎜rrreee🎜Dans le code ci-dessus, nous avons défini un getter nommé doubleCounter qui renvoie le double du statut de counter. 🎜🎜L'utilisation d'actions et de getters dans les composants est similaire à l'utilisation d'opérations et d'états. Les actions peuvent être déclenchées via la méthode $store.dispatch et les valeurs getter peuvent être obtenues via la propriété $store.getters. 🎜rrreee🎜Dans le code ci-dessus, nous déclenchons l'action asyncIncrement via la méthode this.$store.dispatch et transmettons le this.$store.getters. doubleCounter pour obtenir la valeur de <code>doubleCounter. 🎜🎜Pour résumer, Vuex 4 offre un moyen pratique de gérer le partage global de données dans les applications Vue 3. En définissant les états, les opérations, les actions et les getters, nous pouvons facilement partager et gérer les données. J'espère que cet article vous aidera à mieux comprendre l'utilisation et les principes de Vuex 4. 🎜

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!