Il se trouve que j'ai commencé à apprendre Vue il y a un mois avec Vue 3. Il a été annoncé précédemment que Vue 3 a été réécrit en tapuscrit. Pour être honnête, j'attendais la même chose de la nouvelle version de Vuex 4 pour Vue 3.
Mais pour une raison quelconque, tout ne s'est pas déroulé comme prévu. En regardant le référentiel Vuex 4
https://github.com/vuejs/vuex/tree/4.0
Nous verrons soudainement qu'il est écrit en js et à la toute fin des types sont écrits pour le code prêt à l'emploi.
D'une part, nous, en tant qu'utilisateurs, ne nous soucions pas en théorie de la manière dont le code est écrit - l'essentiel est qu'il soit pratique de l'utiliser. Et c'est là qu'un utilisateur novice se trouve immédiatement dans une situation étrange lorsqu'il essaie d'utiliser du tapuscrit pour contrôler les types des objets de magasin créés. Le fait est que la saisie du magasin créé dans Vuex 4 est absente du mot.
Eh bien, d'accord, j'ai pensé et j'ai commencé à chercher une solution.
Pour VUE 2, des solutions élégantes basées sur des décorateurs sont proposées, par exemple . Si nous regardons le code source du projet, nous pouvons voir qu'il a été développé pour "vue": "> = 2" et "vuex": "3"
L'utilisation de décorateurs dans Vue 3 est basée sur la bibliothèque vue-class-component , qui n'a même pas encore été documentée. Ainsi, utiliser des décorateurs pour taper dans Vuex 4 pour Vue 3 ressemble à une entreprise compliquée à mon avis pour le moment et j'ai décidé de cesser d'utiliser des décorateurs pour taper.
La solution que je propose est basée sur le projet et l' article .
La méthode proposée par Andrey, à mon avis, nécessite une grande quantité de code supplémentaire, et basé sur son code, j'ai implémenté ma solution.
Points forts
store " ", . - . , - auth.ts auth. - ( - typescript ).
Vuex .
Vuex Omit Vuex , actions getters.
store - index.ts ( Vuex ) ( counter auth).
mutatations mutations void. Actions payload , action. typescript 4 - named tupples. - , , index.
typescript 4 - package.json.
vue-cli typescript 3 .
ncu package.json > 4.0 ( typescript 4.1.3 ). package-lock.json npm install.
. src store - . typescript >= 4
initialState.ts - state. state , typescript infer . , - - users:
export const initialState = {
counter: {
counter: 0,
},
auth: {
name: "Ivan",
idUser: "89annsdj77",
email: "ivan@ivan.ru",
users:[] as Array<string>
},
};
- index.ts - "no change code " .
modules - ( Vuex - ).
(), . Actions no change code .
Getters, ActionsPayload, MutationPayload , counter.ts
mutations, getters, actionsactions
HelloWorld.
P.S. - github.