Premiers pas avec le développement VUE3 : utilisation de la gestion d'état Vuex

VUE3 est une nouvelle génération passionnante de framework VUE, qui a considérablement amélioré les performances, la maintenabilité et l'expérience de développement. Dans VUE3, Vuex est un outil de gestion d'état très important qui peut nous aider à mieux gérer l'état de l'application.

Cet article expliquera comment utiliser Vuex dans VUE3, notamment comment créer un magasin Vuex, comment utiliser Vuex dans les composants, comment effectuer des opérations asynchrones dans Vuex, comment utiliser les plug-ins, etc.

Créer une boutique Vuex

Tout d'abord, nous devons installer Vuex :

npm install vuex@next

Ensuite, pour créer une boutique Vuex, nous pouvons ajouter le code suivant au fichier d'entrée de VUE3 (tel que main.js) :

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

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

Ici , nous passons Utiliser createApp pour créer une instance VUE, puis utilisons le plug-in store pour ajouter le magasin Vuex à l'application. Nous devons maintenant créer un dossier de magasin, puis créer un fichier index.js à l'intérieur : createApp创建了一个VUE实例，然后使用了store插件将Vuex store添加到应用程序中。现在我们需要创建一个store文件夹，然后在里面创建一个index.js文件：

import { createStore } from 'vuex'

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

export default store

在这里，我们首先使用createStore函数创建了一个Vuex store，并指定了一个初始状态count: 0。然后，我们定义了一个名为increment的mutation，它以state作为参数，并将state.count递增1。最后，我们将store导出，以便在应用程序中使用。

在组件中使用Vuex

现在我们已经创建了Vuex store，接下来我们将在组件中使用它。我们将在一个Counter组件中使用count和incrementmutation。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment Count</button>
  </div>
</template>

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

在这里，我们首先使用计算属性count获取store.state.count的当前值，然后在按钮上添加了一个点击事件，调用了incrementmutation。

现在我们可以在应用程序中使用Counter组件，并且它将自动连接到Vuex store。

异步操作

有时，我们需要在Vuex store中执行异步操作，例如发送HTTP请求。在这种情况下，我们可以使用示例代码中的actions选项。

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      todos: []
    }
  },
  mutations: {
    setTodos(state, todos) {
      state.todos = todos
    }
  },
  actions: {
    async fetchTodos({ commit }) {
      const response = await fetch('/api/todos')
      const todos = await response.json()
      commit('setTodos', todos)
    }
  }
})

export default store

在这里，我们首先定义了一个名为setTodos的mutation，并将传入的todos参数设置为state.todos。然后，我们使用actions选项定义了一个名为fetchTodos的操作，它将触发异步操作来获取todos数据，并在完成后调用commit来触发setTodosmutation。

使用插件

我们可以使用插件来扩展Vuex store的功能。例如，我们可以使用vuex-persistedstate插件来使Vuex store持久化，以便每次刷新页面都不会重置store的状态。

首先，我们需要安装插件：

npm install vuex-persistedstate

然后，我们可以将插件添加到store中：

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  // ...
  plugins: [createPersistedState()]
})

export default store

在这里，我们从vuex-persistedstate导入了createPersistedStaterrreee

Ici, nous créons d'abord un magasin Vuex à l'aide de la fonction createStore et spécifions un état initialcount : 0. Ensuite, nous définissons une mutation nommée increment, qui prend state comme paramètre et incrémente state.count de 1. Enfin, nous exportons le magasin pour l'utiliser dans notre application.

Utiliser Vuex dans un composant

Maintenant que nous avons créé la boutique Vuex, nous allons l'utiliser dans un composant. Nous utiliserons la mutation count et increment dans un composant Counter.

rrreee

Ici, nous utilisons d'abord la propriété calculée count pour obtenir la valeur actuelle de store.state.count, puis ajoutons un événement de clic sur le bouton, en appelant incrémentermutation. 🎜🎜Nous pouvons désormais utiliser le composant Counter dans notre application et il se connectera automatiquement à la boutique Vuex. 🎜🎜Opérations asynchrones🎜🎜Parfois, nous devons effectuer des opérations asynchrones dans le magasin Vuex, telles que l'envoi de requêtes HTTP. Dans ce cas, nous pouvons utiliser l'option actions dans l'exemple de code. 🎜rrreee🎜Ici, nous définissons d'abord une mutation nommée setTodos et définissons le paramètre todos entrant sur state.todos . Nous définissons ensuite une action appelée fetchTodos en utilisant l'option actions, qui déclenchera une opération asynchrone pour récupérer les données todos et appellera commit une fois terminée. code> pour déclencher la mutation setTodos. 🎜🎜Utilisation de plugins🎜🎜Nous pouvons utiliser des plugins pour étendre les fonctionnalités de la boutique Vuex. Par exemple, nous pouvons utiliser le plugin vuex-persistedstate pour rendre le magasin Vuex persistant afin que l'état du magasin ne soit pas réinitialisé à chaque fois que la page est actualisée. 🎜🎜Tout d'abord, nous devons installer le plugin : 🎜rrreee🎜 Ensuite, nous pouvons ajouter le plugin au magasin : 🎜rrreee🎜Ici, nous avons importé createPersistedStatedepuis vuex-persistedstate > fonction, puis ajoutez-la au magasin en tant que plugin. 🎜🎜Résumé🎜🎜Dans cet article, nous avons appris à utiliser la gestion d'état Vuex dans VUE3. Nous avons appris comment créer un magasin Vuex, comment utiliser Vuex dans les composants, comment effectuer des opérations asynchrones dans Vuex et comment utiliser des plugins pour étendre les fonctionnalités de Vuex. 🎜🎜L'utilisation de Vuex peut nous aider à mieux gérer l'état de notre application, à rendre notre application plus maintenable et à fournir une meilleure base pour une expansion future. 🎜

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!