So kam es, dass ich vor einem Monat mit Vue 3 angefangen habe, Vue zu lernen. Es wurde bereits angekündigt, dass Vue 3 in Typoskript umgeschrieben wurde. Um ehrlich zu sein, habe ich dasselbe von der neuen Version von Vuex 4 für Vue 3 erwartet.
Aber aus irgendeinem Grund verlief alles nicht wie erwartet. Schauen Sie sich das Vuex 4-Repository
https://github.com/vuejs/vuex/tree/4.0 an
Wir werden plötzlich sehen, dass es in js geschrieben ist und ganz am Ende Typen für den vorgefertigten Code geschrieben werden.
Einerseits ist es uns als Benutzern theoretisch egal, wie der Code geschrieben wird - die Hauptsache ist, dass es bequem ist, ihn zu verwenden. Und hier befindet sich ein Anfänger sofort in einer seltsamen Situation, wenn er versucht, mit Typoskript Typen für die erstellten Geschäftsobjekte zu steuern. Tatsache ist, dass die Eingabe des in Vuex 4 erstellten Speichers im Wort überhaupt nicht enthalten ist.
Okay, dachte ich und suchte nach einer Lösung.
Für VUE 2, elegante Dekorateur-basierten Lösungen angeboten werden , zum Beispiel dieses . Wenn wir uns den Quellcode des Projekts ansehen, können wir sehen, dass er für "vue" entwickelt wurde: "> = 2" und "vuex": "3"
Die Verwendung von Dekoratoren in Vue 3 basiert auf der Vue -Class-Component- Bibliothek , die noch nicht einmal dokumentiert wurde. Daher scheint es meiner Meinung nach im Moment ein kompliziertes Unterfangen zu sein, Dekoratoren zum Tippen in Vuex 4 für Vue 3 zu verwenden, und ich habe beschlossen, keine Dekoratoren mehr zum Tippen zu verwenden.
Die von mir vorgeschlagene Lösung basiert auf dem Projekt und dem Artikel .
Die von Andrey vorgeschlagene Methode erfordert meiner Meinung nach eine große Menge zusätzlichen Codes, und basierend auf seinem Code habe ich meine Lösung implementiert.
Höhepunkte
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.