Vous n'aurez peut-être pas besoin de Vuex – Services avec état partageables dans Vue

Vuex n'est pas toujours la meilleure option pour créer une logique avec état partageable dans les applications Vue, car seul l'état global devrait être présent. Cet article couvre quelques alternatives.

Il existe plusieurs façons de gérer l'état dans les applications Vue. Cet article explore comment les données avec état et les opérations asynchrones peuvent être effectuées en dehors des composants sans utiliser Vuex.

Bus d'événements

Le bus d'événements est un modèle qui utilise une instance Vue vide pour communiquer entre les composants.

 import  Vue  from   'vue' 

 export   const  bus  =   new   Vue  () 


 import   { bus }   from   './ eventBus.js' 

 export   default   {
     data  ()   {
         retour   {
            valeur :   null 
        } 
    } 
    méthode
 créé  ()   {

bus .  $ sur  ( 'action'   ( { payload } )   => [19659014] {
             this .  value  =  payload
        } ) 
	} 
} 


 import   { bus }   from   './ eventBus.js' 

 export   par défaut   {
	 créé  ()   {

bus .  $ emit  ( 'action'   {
myPayload :   1234 
		} ) 
	} 
} 

Le modèle de bus d'événements est simple et facile à utiliser, mais il ne s'adapte pas bien, en particulier de taille moyenne à grande applications avec beaucoup de flux de données. Par conséquent, ce modèle ne pouvait vraiment être appliqué que dans des applications plus petites. Cependant, je ne le recommanderais toujours pas, car il existe de meilleures options. De plus, le bus d'événements est obsolète dans Vue 3, donc si vous souhaitez mettre à niveau de Vue 2 plus rapidement et plus facilement, oubliez le bus d'événements.

État au niveau des composants

La plupart du temps, l'état peut être conservé au niveau des composants. Si des données sont nécessaires dans les composants enfants, elles peuvent être transmises comme accessoires. Mais que se passe-t-il si nous avons besoin de partager les données entre des composants frères, ou même entre des arborescences de composants sur une page?

Une façon de le faire serait d'élever l'état au composant ancêtre commun. Cela peut fonctionner si l'état n'est pas partagé par de nombreux composants, mais si tel est le cas, les données doivent être transmises à de nombreux composants, parfois au plus profond du sous-arbre des composants. Fournir / Injecter pourrait être utilisé pour éviter cela, mais bonne chance pour savoir où exactement les données sont fournies, en particulier si plusieurs développeurs travaillent sur une application et qu'elle est d'une taille décente. Par conséquent, ce n'est pas une solution optimale, car certains composants ne feraient passer les données que via des accessoires et seraient donc encombrés de données qu'ils n'utilisent même pas.

Vuex

Vuex est une excellente bibliothèque pour gérer l'état global dans les applications Vue, car il a été construit spécifiquement pour cette raison par l'équipe Vue. Vuex introduit un peu de passe-partout et de frais généraux, car nous devons apprendre de nouveaux concepts. Et en plus de l'état, nous devons également gérer les getters, les actions et les mutations.

 const  state  =   {
personnes :   [] 
} 

 const  getters  =   {
	 getPeople  ( state ) [19659014] {
		 retour  état .  personnes
} 
} 

 const  actions  =   {
	 async   fetchPeople  ( context  payload  ])   {
		 const  response  =   wait  axios .  get  ( "https://swapi.dev/ api / people / ") 
context .  commit  ( 'SET_PEOPLE'  response .  data .  results ) 
	 } 
} 

 mutations const   =   {
	 SET_PEOPLE  ( state  payload )   {
état .  personnes  =  charge utile
} 
} 

 export   default   {
état 
getters 
actions 
mutations
} 

 // Un composant  

Néanmoins, tout l'état qui doit être partagé entre les composants ne devrait pas y atterrir. J'ai vu de nombreuses applications dans lesquelles des données qui ne sont pas partagées dans de nombreux endroits ont été déplacées vers un magasin mondial. De plus, le magasin Vuex est exposé à tous les composants d'une application, de sorte que ses actions et ses mutations sont accessibles de n'importe où. Cependant, si nous souhaitons encapsuler la logique avec état dans une fonctionnalité spécifique ou un sous-arbre de composants, nous ne pouvons pas le faire avec Vuex. Heureusement, il existe d'autres moyens de partager des données avec état.

Vue.observable

Vue.observable a été ajouté à Vue dans la version 2.6. Cela nous permet de créer un objet réactif dont les modifications sont suivies, et les composants Vue seront rendus en conséquence. Nous pouvons créer un nouveau fichier et créer un état réactif en dehors des composants. Ensuite, nous importons exactement ce dont nous avons besoin.

 import  Vue  from   'vue' 

 const  initialState  =   {
people :   [] 
} 


 export   const  state  =  Vue .  observable  ( initialState ) 


 export   const  fetchPeople  =   async   ()   =>   {
	 const  response  =   wait  axios .  get  ( "https://swapi.dev/api/people/" ) 
état .  personnes  =  réponse .  données .  résultats
} 


 import   { state  fetchPeople }   from   './ service' 

 export   default [19659014] {
calculé :   {
        
		 people  ()   {
			 return  state .  people
} 
	} 
	 crée  ()   {
        
		 fetchPeople  () 
	} 
} [19659067] Nous pouvons aller encore plus loin et utiliser un accessoire calculé avec un getter et un setter pour faciliter la récupération et la mise à jour de l'état. 




 export   const   peopleComputed   =   ( )   =>   ( {
people :   {
		 get  ()   {
			 return  state .  people
} 
		 set  ( value )   {
État .  personnes  =  personnes
} 
	} 
} ) 
 


 // composants  
 Comme le montre l'exemple ci-dessus, nous avons réduit la quantité de code nécessaire pour la logique à états partageables et évité les concepts d'actions et de mutations. Au lieu de cela, nous n'avons qu'une seule fonction qui peut récupérer des données et mettre à jour l'état immédiatement. De plus, cet état n'est disponible que partout où il est importé, il n'est donc bien encapsulé que pour les composants qui en ont besoin.
 Vue.observable est un modèle que j'utilise dans Vue 2. Cependant, dans Vue 3, il y a quelque chose d'encore mieux pour cela — API de composition.
 API de composition
 L'API de composition est une nouvelle fonctionnalité de Vue 3. Inspirée par React Hooks, elle nous permet de créer facilement une logique avec état réutilisable. Il peut également être utilisé dans les applications Vue 2 via un plugin—  vuejs / composition-api . Je n'entrerai pas dans les détails sur le fonctionnement exact de Composition API, car j'ai déjà écrit un article à ce sujet, que vous pouvez trouver  ici .
 Si vous savez comment cela fonctionne, c'est génial ! Passons à l'implémentation.






 import   { ref }   from   'vue' 
 import  axios  from   "axios" ; 

 export   const   usePeople   =   ()   =>   {
  
   const  people  = [19659088] ref  ( [] ) ; 
	
  
   const  fetchPeople  =   async   ()   =>   {
     const  response  =   wait  axios .  get  ( "https://swapi.dev/ api / people / ") ; 
    people .  value  =  response .  data .  results ; 
  } ; 
  
  
   return [19659014] {
    personnes 
    chercher des gens
  } ; 
} ; 
  
 Le code écrit à l'aide de l'API Composition est encore plus clair et concis que les exemples précédents, et personnellement, je l'utiliserai beaucoup dans Vue 3.
 Conclusion
 Il existe plusieurs façons de gérer l'état dans les applications Vue. . Il est important de considérer toutes les options avant de passer directement à Vuex, car ce n'est peut-être pas toujours le meilleur choix, surtout si les données dont nous traitons ne doivent pas nécessairement être globales. Le bus d'événements ne doit plus être utilisé, car il est obsolète. Pensez plutôt à utiliser Vue.observable ou Composition API.