Motif untuk menulis artikel ini adalah artikel lain tentang pengetikan Vue dan, karenanya, Vuex . Yang mengejutkan saya, saya tidak menemukan penyebutan modul di sana, yang, menurut pendapat saya, adalah yang terbaik dari jenis Vuex. Pencarian untuk Habr, dan memang untuk Runet (pada kenyataannya, dan dalam sumber-sumber bahasa Inggris tidak mudah untuk segera menemukan referensi), sayangnya, tidak membuahkan hasil apa pun. Artikel ini bukan analisis terperinci dan manual multi-halaman tentang penggunaan dan konfigurasi, melainkan cara untuk berbagi dengan Anda, Vue-ninja, alat yang melakukan tugasnya dengan sempurna.

vuex-smart-module

Siapa yang tidak punya waktu sama sekali: Github .

Tujuan utama dari modul, seperti yang Anda duga, adalah cakupan format penuh dari tipe penyimpanan Vuex. Baik secara internal maupun langsung dalam komponen itu sendiri. Modul ini ditulis oleh kontributor utama ( @ktsn ) dari pustaka komponen Vuex dan vue-class .

Air

Untuk mengakui, jalur saya di Typescript hanya dimulai baru-baru ini, termasuk dan dengan hal-hal seperti dekorator, jadi saya tidak bisa membandingkan perpustakaan ini dengan analog lain. Upaya saya untuk mengkonfigurasi dan menggunakan alat-alat lain (misalnya, vuex-module-dekorator ) membawa saya ke berbagai masalah, yang pada akhirnya entah bagaimana tidak memungkinkan saya untuk menyadari apa yang saya butuhkan (atau saya hanya tidak tahu cara memasaknya, seperti yang mereka katakan). Saya sangat beruntung dengan modul vuex-smart-module - perpustakaan muncul pada saat saya menerjemahkan proyek (dan repositori) ke dalam Filescript. Sekarang semuanya berfungsi dengan baik, dan kodenya enak dipandang.

Contohnya

Perpustakaan, menurut pendapat saya, memiliki dokumentasi yang baik yang mencakup semua kasus yang mungkin akan Anda temui (dan jika tidak, maka dalam tes Anda dapat menemukan semua yang lain, non-sepele). Namun, untuk setidaknya mencairkan artikel dengan kode, saya akan memberikan contoh dasar koneksi dan penggunaan, beberapa contoh "hidup", serta cara kerjanya bersamaan dengan dekorator (ada nuansa di sana).

Pembuatan modul

Modul dibuat menggunakan kelas. Ini mungkin tampak menakutkan bagi sebagian orang, tetapi percayalah, Anda terbiasa dengan cepat.

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 }) 

Koneksi

/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' } ) 

Modul

Menghubungkan modul mirip dengan yang terjadi di Vuex biasa. Mereka perlu ditentukan dalam properti modul dari RootStore:

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

Gunakan di dalam komponen

Anda dapat menggunakan penyimpanan baik melalui properti global ini. $ Store, dan melalui pemetaan, yang dalam banyak hal mirip dengan yang ada di Vuex:

 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) } }) 

Mengetik

Contoh mengetik komit dan kirim:

 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 } ) } } 

Resepsi

Terhubung menggunakan dekorator ( 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) } } 

Menggunakan modul di dalam modul

/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! } } /* … */ 

Reset vault

Terkadang mungkin perlu mengatur ulang penyimpanan ke nilai default, ini dilakukan cukup sederhana:

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

Terakhir

Saya harap Anda tertarik, atau setidaknya Anda mengetahui tentang perpustakaan ini. Siapa tahu, mungkin mulai dengan proyek berikutnya (atau mungkin refactoring yang sekarang hanya sekitar sudut?) Anda, seperti saya, akan mulai menggunakan vuex-smart-module (atau Typcript pada umumnya)? Secara pribadi, transisi saya ke Typcript agak menyakitkan (selama 1,5-2 tahun, saya mengambil upaya untuk mengubahnya setidaknya 3-4 kali, tetapi setiap kali saya mengalami beberapa masalah, kesalahpahaman. Saya sering dihantui oleh perasaan bahwa pengembangan pada Typcript mengambil 2-3 kali lebih banyak dari sebelumnya, karena sekarang Anda tidak bisa hanya "dengan cepat membuat sketsa." Tapi sekali, menginjak "sisi terang pengetikan statis", saya merasakan kekuatan jenis dan bagaimana mereka akhirnya memungkinkan mempercepat proses pengembangan, yang sama pentingnya, men-debug kode (mungkin dalam 2- yang sama 3 kali), serta memfasilitasi dukungan lebih lanjut.

PS Jangan lupa untuk memberi tanda bintang pada modul ini. :)