Introduction à la Composition API en Vue.js

La Composition API est une nouvelle façon de créer des composants dans Vue.js. Elle permet aux développeurs d’écrire du code plus clair et plus facile à maintenir en séparant les états et les méthodes des composants. Dans cet article, nous allons découvrir comment utiliser la Composition API pour créer des composants plus efficaces.

Prérequis

Avant de commencer, assurez-vous d’avoir une bonne compréhension de l’API Options de Vue.js ainsi que de Vuex. Si vous n’avez pas déjà fait cela, nous vous recommandons de consulter nos articles précédents sur ces sujets.

Étape 1 : Comprendre la Composition API

La Composition API est basée sur les concepts suivants :

• Les composants sont créés en utilisant des fonctions qui renvoient un objet.
• Ces fonctions peuvent accéder à d’autres fonctions pour partager du code.
• Les états et les méthodes des composants sont séparés pour une meilleure organisation.

Étape 2 : Créer un Composant avec la Composition API

Tout d’abord, créons un nouveau fichier App.vue dans notre projet. Dans ce fichier, nous allons créer un composant qui affiche une liste de listings.

<!-- composition-api/src/app/App.vue -->
<template>
  <div class="app" :class="{ 'has-background-black': isDark }">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isDark: false,
    }
  },
  computed: {
    // ...
  },
  methods: {
    // ...
  }
}
</script>

Étape 3 : Séparer les États et les Méthodes

Maintenant, nous allons séparer les états et les méthodes des composants en utilisant la Composition API.

<!-- composition-api/src/app/App.vue -->
<script>
import { computed } from 'vue';

export default {
  name: 'App',
  data() {
    return {
      isDark: false,
    }
  },
  setup() {
    const store = useStore();
    
    const listings = computed(() => store.getters.listings);
    const loading = computed(() => store.getters.loading);
    
    function toggleDarkMode() {
      this.isDark = !this.isDark;
    }
    
    return { listings, loading, toggleDarkMode };
  },
}
</script>

Étape 4 : Utiliser la Composition API pour les Composants

Maintenant que nous avons créé notre composant avec la Composition API, nous pouvons le réutiliser dans d’autres composants.

<!-- composition-api/src/app/components/ListingsList.vue -->
<template>
  <!-- ... -->
</template>

<script>
import { computed } from 'vue';

export default {
  name: 'ListingsList',
  props: ['listings', 'isDark'],
  setup() {
    const store = useStore();
    
    const listingsComputed = computed(() => store.getters.listings);
    const loadingComputed = computed(() => store.getters.loading);
    
    return { listingsComputed, loadingComputed };
  },
}
</script>

Étape 5 : Mettre en Place la Vuex Store

Maintenant que nous avons créé nos composants avec la Composition API, il est temps de mettre en place notre Vuex store.

<!-- composition-api/src/app/store.js -->
import { createStore } from 'vuex';

const state = {
  listings: [],
  loading: false,
};

const mutations = {
  UPDATE_LISTINGS(state, payload) {
    state.listings = payload;
  },
  LOADING_PENDING(state) {
    state.loading = true;
  },
  LOADING_COMPLETE(state) {
    state.loading = false;
  }
};

const actions = {
  getListings({ commit }) {
    // ...
  },
  removeListing({ commit }, listing) {
    // ...
  },
  resetListings({ commit }) {
    // ...
  },
};

const getters = {
  listings: (state) => state.listings,
  loading: (state) => state.loading,
};

export default createStore({
  state,
  mutations,
  actions,
  getters,
});

Conclusion

La Composition API est une nouvelle façon de créer des composants dans Vue.js. Elle permet aux développeurs d’écrire du code plus clair et plus facile à maintenir en séparant les états et les méthodes des composants. Dans cet article, nous avons découvert comment utiliser la Composition API pour créer des composants plus efficaces.

Prochaines Étapes

Pour aller plus loin avec la Composition API, vous pouvez consulter notre autre article sur l’utilisation de la Composition API avec Vuex.