VueJS 3: état global avec API de composition

La nouvelle API de composition vous permet de vous débarrasser du magasin Vuex. Regardons un exemple simple de la façon d'y parvenir. Et considérez les avantages et les inconvénients.

Exemple

Prenons un exemple de compteur Vuex de la documentation de la boutique la plus simple et implémentons-le à l'aide de l'API de composition.



Modules de module compteur / counter.ts:

import { ref } from 'vue'

const counter = ref(0)

export default function useCounter () {
  const increment = () => {
    counter.value++
  }
  return { counter, increment }
}

Notez que la variable de compteur est en dehors de la fonction useCounter (). Ainsi, lorsque la fonction useCounter est appelée dans différents composants, counter fera référence à la même instance. Et c'est ce dont nous avons besoin.



Utiliser notre compteur dans différents composants est simple:

<template>
    <div>
      {{ counter }}
    </div>
   <button @click="increment">+</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import useCounter from '@/modules/useCounter'

export default defineComponent({
  name: 'App',
  setup () {
    const { counter, increment } = useCounter()
    return { counter, increment }
  }
})
</script>

Pour utiliser le compteur global, il vous suffit d'importer useCounter dans les modules requis et de l'utiliser.



Si vous avez besoin de restreindre l'accès à la variable de compteur, vous pouvez l'exporter non pas, mais la fonction getter:

import { ref, computed } from 'vue'

const counter = ref(0)
const getCounter = computed(() => counter.value)
const increment = () => counter.value++

export default function useCounter () {
  return { getCounter, increment }
}

Avantages et inconvénients

L'un des avantages de Vuex est de travailler avec les outils de développement Vue.js. Il est très pratique de voir l'état global complet sous la forme d'un arbre, de voir les appels aux mutations avec les variables passées, et aussi de pouvoir revenir à différents états. La manière dont l'API de composition sera prise en charge dans les outils de développement Vue.js n'est pas encore claire, le travail est toujours en cours.



La structure de Vuex - getters, mutations, actions - peut sembler syntaxiquement redondante, mais elle permet une présentation et une séparation claires du travail du module de stockage et est plus un plus qu'un moins. Et lors de l'utilisation de l'API de composition, le développeur décide de tout lui-même, il peut faire un bonbon, ou peut-être pas.



La prise en charge de TypeScript est un point faible de Vuex. Tous les articles essayant de taper Vuex semblent intimidants. Et c'est ainsi que Vuex devient très verbeux. Si nous utilisons l'API de composition, c'est plus simple, utilisez TypeScript comme d'habitude.



Vuex se connecte en tant que plugin et est disponible dans chaque composant via ce. $ Store. Dans le cas de l'API de composition, nous devons importer le module. Il n'y a pas beaucoup de différence et les deux approches vous permettent de travailler avec l'État mondial.



L'utilisation de l'API de composition, par contre, nous libère des dépendances inutiles et nous permet d'organiser l'état global comme il convient. En revanche, la question des tests demeure. Les modules globaux eux-mêmes sont faciles à tester, mais les modules qui les utilisent sont déjà plus difficiles à tester.

Conclusion

Il n'est pas encore clair s'il vaut la peine d'abandonner Vuex, mais il existe définitivement un nouvel outil qui vous permet de résoudre les problèmes résolus par Vuex. Dans un proche avenir, il sera clair quelle approche est la meilleure et dans quel cas. En attendant, les développeurs de Vuex n'ont pas annoncé le pliage du projet et l'ont vu comme avant, et dans la documentation de Vue3, il y a toujours un lien vers Vuex.