Les vuex les plus populaires incluent actuellement : vuex-aggregate, vuex-class, vuex-module-decorators
npm en a trouvé des similaires, regardez le tableau de tendances : vuex-aggregate vs vuex-class vs vuex-class-component vs vuex-class-module vs vuex-class-modules vs vuex-module-decorators | tendances npm
| Étoiles | Problèmes | Version | Mis à jour | Créé | ||
|---|---|---|---|---|---|---|
| vuex-agrégat |
14 | 19 | 4.1.3 | il y a 4 ans | il y a 4 ans | |
| classe vuex |
1 670 | 18 | 0.3.2 | il y a 3 ans | il y a 5 ans | |
| composant de classe vuex |
213 | 40 | 2.3.6 | il y a 2 mois | il y a 3 ans | |
| module de classe vuex |
0.0.16 | il y a 3 ans | il y a 5 ans | |||
| modules de classe vuex |
175 | 17 | 1.3.0 | il y a un an | il y a 3 ans | |
| vuex-module-décorateurs |
1 705 | 131 | 2.0.0 | il y a 2 mois | il y a 4 ans |
En fait, ce qui peut être comparé, c'est vuex-class et vuex-module-decorators. Personnellement, je préfère vuex-class. Bien sûr, les deux peuvent être combinés et utilisés ensemble. L'un est défini dans le magasin et l'autre est utilisé dans le composant vue.
classe vuex
Adresse du projet : GitHub - ktsn/vuex-class : Assistants de liaison pour Vuex et vue-class-component Bien que cette chose n'ait pas été mise à jour depuis trois ans, il n'y a rien de mal à cela.
Cela doit être utilisé conjointement avec vue-class-component.
importer { Composant en tant que tsc } depuis 'vue-tsx-support' ;
importer { Component, Prop } depuis 'vue-property-decorator' ;
importer {State, Getter, Action, Mutation, espace de noms} depuis 'vuex-class'
const someModule = espace de noms ('chemin/vers/module')
@Composant
exporter la classe par défaut La démo étend tsc<Props> {
@State(state => state.bar) stateBar
@Getter('foo') getterFoo
@someModule.Getter('foo') moduleGetterFoo
rendre(){
retour (
<div>démo</div>
)
}
}
Son utilisation est pratique pour une utilisation dans les composants via des décorateurs. Le magasin vuex d'origine n'a pas du tout besoin d'être modifié.
Mais si vous utilisez @vue/composition-api, vue-class ne peut pas être utilisée. Il est recommandé d'utiliser vuex-module-decorators ici.
vuex-module-décorateurs
Documentation officielle : Modules avec espace de noms | vuex-module-decorators
C'est pratique pour définir des modules de magasin
importer {Module, VuexModule, Mutation, Action} depuis 'vuex-module-decorators'
interface d'exportation Informations utilisateur {
nom : chaîne ;
âge:numéro
}
@Module
exporter la classe par défaut UserInfo étend VuexModule {
nom = 'zhoulujun'
âge = 30
@Mutation
setUser (utilisateur : UserInfo) {
ce.nom = utilisateur.nom
}
// l'action 'incr' valide la mutation 'increment' une fois terminée avec la valeur de retour comme charge utile
@Action({ commit : 'setUser' })
getUtilisateur() {
// This.setUser ne peut pas être appelé directement
retour 5
}
// l'action 'incr' valide la mutation 'increment' une fois terminée avec la valeur de retour comme charge utile
@Action
getUser(id) {
retourner http.getUser(id).then((user)=>{
this.context.commit('setUser', utilisateur);
})
}
}
Créer une boutique
import Vue from 'vue';
importer Vuex depuis 'vuex' ;
importer { UserInfo } depuis './modules/user' ;
Vue.use(Vuex);
interface d'exportation IRootState {
utilisateur : Infoutilisateur
}
exporter le nouveau Vuex.Store<IRootState>({
// modules: {
// utilisateur : Utilisateur,
// },
});
Le point dont il faut se plaindre ici est que la fonction du décorateur @Action appelle directement la méthode décorée @Mutation.
@MutationAction
Dans vuex, vous devez modifier les données dans l'état via la validation. Il existe un modificateur MutationAction dans vuex-module-decorators, qui peut modifier directement les données d'état.
la classe par défaut d'exportation PassengerStore étend VuexModule {
nom d'utilisateur public = '';
mot de passe public = '';
//'nom d'utilisateur' et 'mot de passe' sont remplacés par l'objet renvoyé,
//Le format doit être `{username :..., password :...}`
@MutationAction({muter : ['nom d'utilisateur', 'mot de passe'] })
async setPassenger (nom : chaîne) {
réponse const : any = wait request(name); // L'interface renvoie [{name:'Zhang San',password:'123456'}]
//La valeur de retour ici doit être cohérente avec le nom après la mutation ci-dessus ;
retour {
nom d'utilisateur : réponse[0].name,
mot de passe : réponse[0].mot de passe,
} ;
}
}
Mais pour cette méthode, les données structurelles doivent avoir été déterminées. Nous l’utilisons encore relativement rarement.
Généralement, this.context.commit est utilisé directement en action.
modules de classe vuex
vuex-module-decorators et sont des choses similaires. Pour une utilisation détaillée, veuillez vous référer à : Décorateurs de classe Typescript pour les modules vuex | BestofVue
Pas grand chose d'autre à dire.
vue-class et vuex-module-decorators combinés
Autrement dit, la partie données du magasin utilise vuex-module-decorators et, dans le composant, vue-class est utilisée pour appeler le magasin.
Il s'agit de la collection des deux premiers morceaux de code ci-dessus.
Bien que @vue/composition-api écrive des composants vue2, il peut être facilement mis à niveau vers vue3 à l'avenir. Mais vue-class-component aura également une version vue3 dans le futur.
Sur le plan personnel, je me sens très mal à l'aise avec l'aspect héritage de classe @vue/composition-api.
Voir l'article :
L'état de Vuex typé : l'approche la plus propre https://betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230
Première expérience avec Vue & TypeScript - en utilisant Vuex (vuex-module-decorators) Première expérience avec Vue & TypeScript - en utilisant Vuex (vuex-module-decorators) - Nuggets
Réimprimé de l'article de ce site « Le plan de transformation de Vuex dans TSX : Comment gérer Vuex dans le projet de transformation TS Vue2 ? » 》,
merci d'indiquer la source : Plan de transformation Vuex en TSX : Comment gérer Vuex dans le projet de transformation TS Vue2 ? - Résumé de l'entrée de vue - Site personnel de Zhou Junjun