Compétences en développement Vue3+TS+Vite : Comment utiliser Vuex pour la gestion de l'état

Compétences de développement Vue3+TS+Vite : Comment utiliser Vuex pour la gestion de l'état

Introduction :
Dans le développement de Vue, la gestion de l'état est un sujet important. En tant qu'outil de gestion d'état officiellement recommandé par Vue, Vuex est très couramment utilisé dans les projets. Cet article expliquera comment utiliser Vuex pour la gestion des états et développer avec Vue3, TypeScript et Vite.

1. Installer les dépendances
Tout d'abord, nous devons installer les versions Vuex et vuex@4 dans le projet pour prendre en charge Vue3 :

npm install vuex@next --save

2 Créer un magasin
Créez un répertoire de magasin dans le src. répertoire et créez un fichier index.ts. Dans le fichier index.ts, nous devons définir l'instance Vuex Store et exporter l'instance pour une utilisation globale.

// store/index.ts
import { createStore } from 'vuex';

const store = createStore({
  // 定义state
  state: {
    count: 0,
  },
  // 定义mutations
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  // 定义actions
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    },
  },
});

export default store;

3. Créez main.ts
Dans le fichier main.ts du répertoire src, nous devons importer le magasin Vuex et utiliser le magasin dans la fonction createApp.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App)
  .use(store)
  .mount('#app');

4. Utilisation de Vuex
Maintenant, nous avons mis en place la configuration de base de Vuex. Ensuite, nous pouvons utiliser Vuex dans le composant.

Dans App.vue, nous déclenchons la mutation incrémentale dans le magasin en utilisant la fonction mapState辅助函数，来映射store中的count值到组件中，并通过使用mapMutationsauxiliaire.

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

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment']),
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
  },
};
</script>

À ce stade, nous avons terminé l'utilisation de base de Vuex dans le projet Vue3+TS+Vite. En utilisant Vuex, nous pouvons facilement gérer l'état global de l'application et réaliser le partage d'état et la communication, améliorant ainsi l'efficacité du développement et la maintenabilité du code.

Résumé :
Cet article présente comment utiliser Vuex pour la gestion de l'état dans le projet Vue3+TS+Vite. En installant des dépendances, en créant des instances de magasin et en utilisant les fonctions auxiliaires de Vuex, nous pouvons facilement utiliser Vuex dans le projet pour gérer et partager l'état global.

Ce qui précède est une introduction à la façon d'utiliser Vuex pour la gestion de l'état dans les compétences de développement Vue3+TS+Vite. J'espère que cela sera utile à votre pratique de développement. Si vous avez des questions, n'hésitez pas à en discuter.

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!