Das Motiv für das Schreiben dieses Artikels war ein weiterer Artikel über die Eingabe von Vue und dementsprechend von Vuex . Zu meiner Überraschung fand ich dort keine Erwähnung eines Moduls, das meiner Meinung nach das beste seiner Art von Vuex ist. Die Suche nach Habr und in der Tat nach dem Runet (tatsächlich und in englischen Quellen ist es nicht einfach, sofort Referenzen zu finden) ergab leider keine Ergebnisse. Dieser Artikel ist keine detaillierte Analyse und ein mehrseitiges Handbuch zur Verwendung und Konfiguration, sondern eine Möglichkeit, mit Ihnen, lieber Vue-ninja, ein Tool zu teilen, das seine Aufgabe perfekt erfüllt.

vuex-smart-modul

Wer hat überhaupt keine Zeit: Github .

Der Hauptzweck des Moduls ist, wie Sie vielleicht vermutet haben, die vollständige Formatabdeckung des Vuex-Speichers mit Typen. Sowohl intern als auch direkt in den Komponenten selbst. Das Modul wird vom Hauptverantwortlichen ( @ktsn ) der Vuex- und vue-class-component- Bibliotheken geschrieben.

Wasser

Zugegeben, mein Weg in Typescript begann erst vor kurzem, einschließlich und mit solchen Dingen wie Dekorateuren kann ich diese Bibliothek also nicht mit anderen Analoga vergleichen. Meine Versuche, andere Tools (z. B. Vuex-Modul-Dekoratoren ) zu konfigurieren und zu verwenden, führten zu verschiedenen Problemen, die es mir letztendlich nicht ermöglichten, zu erkennen, was ich brauchte (oder ich wusste einfach nicht, wie ich sie kochen sollte, wie sie sagen). Ich hatte großes Glück mit dem vuex-smart-Modul - die Bibliothek erschien genau in dem Moment, als ich das Projekt (und das Repository) in Typescript übersetzte. Jetzt funktioniert alles einwandfrei und der Code gefällt dem Auge.

Beispiele

Die Bibliothek verfügt meiner Meinung nach über eine gute Dokumentation, die alle möglichen Fälle abdeckt (und wenn nicht, können Sie in den Tests alles andere finden, was nicht trivial ist). Um den Artikel jedoch zumindest irgendwie mit Code zu verdünnen, werde ich grundlegende Beispiele für Verbindung und Verwendung geben, einige Beispiele für das „Leben“ sowie die Funktionsweise in Verbindung mit Dekorateuren (dort gibt es eine Nuance).

Modulerstellung

Ein Modul wird mithilfe von Klassen erstellt. Für manche mag das ungewöhnlich beängstigend erscheinen, aber glauben Sie mir, Sie gewöhnen sich schnell daran.

store / root.ts

//    import { Getters, Mutations, Actions, Module } from 'vuex-smart-module' //  class RootState { count = 1 } //  //      RootState class RootGetters extends Getters<RootState> { get double() { //      `state` return this.state.count * 2 } get triple() { //       `getters` return this.getters.double + this.state.count } } //  //     ,     RootState class RootMutations extends Mutations<RootState> { increment(payload: number) { //       `state` this.state.count += payload } } //  //     //    ,       ,      class RootActions extends Actions< RootState, RootGetters, RootMutations, RootActions > { incrementAsync(payload: { amount: number; interval: number }) { //      `state`, `getters`, `commit`  `dispatch` return new Promise(resolve => { setTimeout(() => { this.commit('increment', payload.amount) }, payload.interval) }) } } //   export default new Module({ state: RootState, getters: RootGetters, mutations: RootMutations, actions: RootActions }) 

Verbindung

/store/index.ts

 import Vue from 'vue' import * as Vuex from 'vuex' import { createStore } from 'vuex-smart-module' import RootStore from './root' Vue.use(Vuex) export const store = createStore( RootStore, { strict: process.env.NODE_ENV !== 'production' } ) 

Module

Das Anschließen von Modulen ähnelt dem in Vuex. Sie müssen in der Moduleigenschaft von RootStore angegeben werden:

 import FooStore from './modules/foo' /* … */ export default new Module({ state: RootState, getters: RootGetters, mutations: RootMutations, actions: RootActions, modules: { FooStore } }) 

Verwendung innerhalb einer Komponente

Sie können den Speicher sowohl über die globale Eigenschaft this. $ Store als auch über die Zuordnung verwenden, die in vielerlei Hinsicht der in Vuex ähnelt:

 import Vue from 'vue' //    (      ) // import FooStore from '@/store/modules/foo' import RootStore from '@/store/root' export default Vue.extend({ computed: RootStore.mapGetters(['double']), methods: RootStore.mapActions({ incAsync: 'incrementAsync' }), created() { console.log(this.double) this.incAsync(undefined) } }) 

Tippen

Beispiel für die Eingabe von Commit und Versand:

 import { categories } from '@/api' export type Category { attributes: { hasPrice: boolean; icon: string lvl: number name: string slug: string }; id: number } export interface IParams { city_id: number } class AppState { categories: Category[] = [] } /* ... */ class AppMutations extends Mutations<AppState> { setCategories(categories: Category[]) { this.state.categories = categories } } class AppActions extends Actions< AppState, AppGetters, AppMutations, AppActions > { async getCategories({params}: {params: IParams}): Promise<Category[]> { return categories.get({params}).then( ({ data }: { data: Category[] }) => { this.commit("setCategories", data) return data } ) } } 

Empfänge

Verbinden Sie sich mit Dekorateuren ( vue-property-decorator )

 import { Vue, Component } from "vue-property-decorator" //    (      ) // import FooStore from '@/store/modules/foo' import RootStore from "@/store/root" //  ,   ,      Typescript,     : const Mappers = Vue.extend({ computed: { ...RootStore.mapGetters(["double"]) }, methods: { ...RootStore.mapActions({ incAsync: 'incrementAsync' }) } }); @Component export default class MyApp extends Mappers { created() { console.log(this.double) this.incAsync(undefined) } } 

Verwenden eines Moduls innerhalb eines Moduls

/store/module/bar.ts

 import { Store } from 'vuex' import { Getters, Actions, Module, Context } from 'vuex-smart-module' //    import FooStore from './foo' /* … */ class BarGetters extends Getters { //   foo!: Context<typeof FooStore>; //     $init(store: Store<any>): void { //     this.foo = FooStore.context(store) } get excited(): string { return this.foo.state.value + '!' // -> hello! } } /* … */ 

Vault zurückgesetzt

Manchmal kann es erforderlich sein, den Speicher auf die Standardwerte zurückzusetzen. Dies geschieht ganz einfach:

 class FooState { /* ... */ } class FooMutations extends Mutations<FooState> { reset () { const s = new FooState() Object.keys(s).forEach(key => { this.state[key] = s[key] }) } } 

Finale

Ich hoffe, Sie waren interessiert oder haben zumindest von dieser Bibliothek erfahren. Wer weiß, vielleicht beginnen Sie mit dem nächsten Projekt (oder überarbeiten Sie die aktuellen gleich um die Ecke?). Sie werden wie ich das vuex-smart-Modul (oder Typescript im Allgemeinen) verwenden? Persönlich war mein Übergang zu Typescript ziemlich schmerzhaft (1,5 bis 2 Jahre lang habe ich versucht, mindestens drei bis vier Mal darauf umzusteigen, aber jedes Mal stieß ich auf einige Probleme, Missverständnisse. Ich wurde oft von dem Gefühl verfolgt, dass die Entwicklung von Typescript dauert 2-3 mal mehr Zeit als zuvor, denn jetzt können Sie es nicht einfach "schnell skizzieren". Aber als ich einmal auf die "helle Seite des statischen Schreibens" trat, spürte ich die Kraft der Typen und wie sie letztendlich zulassen Beschleunigen Sie den Entwicklungsprozess, der ebenso wichtig ist, indem Sie den Code debuggen (möglicherweise in derselben 2- 3 mal), sowie seine weitere Unterstützung zu erleichtern.

PS Vergessen Sie nicht, dieses Modul mit einem Stern zu versehen. :) :)