इस लेख को लिखने का मकसद Vue की टाइपिंग पर एक और लेख था और तदनुसार, Vuex । मेरे आश्चर्य के लिए, मुझे वहाँ एक मॉड्यूल का उल्लेख नहीं मिला, जो, मेरी राय में, वेक्स का अपनी तरह का सबसे अच्छा है। हेब्र में खोजें, और वास्तव में रनेट में (वास्तव में, अंग्रेजी स्रोतों में यह अभी किसी भी संदर्भ को खोजना आसान नहीं है), अफसोस, कोई परिणाम नहीं मिला। यह लेख उपयोग और विन्यास पर एक विस्तृत विश्लेषण और बहु-पृष्ठ मैनुअल नहीं है, बल्कि आपके साथ साझा करने का एक तरीका है, प्रिय Vue-Ninja, एक उपकरण जो अपना काम पूरी तरह से करता है।

vuex स्मार्ट मॉड्यूल

जिसके पास बिल्कुल भी समय नहीं है: गितूब ।

मॉड्यूल का मुख्य उद्देश्य, जैसा कि आप अनुमान लगा सकते हैं, प्रकारों के साथ Vuex भंडारण का पूर्ण प्रारूप कवरेज है। दोनों आंतरिक और सीधे घटकों में स्वयं। मॉड्यूल Vuex और vue- class- घटक पुस्तकालयों के मुख्य योगदानकर्ता ( @ktsn ) द्वारा लिखा गया है।

पानी

स्वीकार करने के लिए, टाइपस्क्रिप्ट में मेरा पथ हाल ही में शुरू हुआ, जिसमें शामिल हैं और सज्जाकार के रूप में ऐसी चीजों के साथ, इसलिए मैं इस पुस्तकालय की अन्य एनालॉग्स के साथ तुलना नहीं कर सकता। अन्य उपकरणों (उदाहरण के लिए, वीयूएक्स-मॉड्यूल-डेकोरेटर्स ) को कॉन्फ़िगर करने और उपयोग करने के मेरे प्रयासों ने मुझे विभिन्न समस्याओं के लिए प्रेरित किया, जो अंत में किसी भी तरह मुझे एहसास नहीं होने दिया कि मुझे क्या चाहिए (या मुझे सिर्फ उन्हें पकाने के लिए कैसे पता नहीं था, जैसा कि वे कहते हैं)। मैं vuex- स्मार्ट-मॉड्यूल के साथ बहुत भाग्यशाली था - लाइब्रेरी उसी क्षण दिखाई दी जब मैं टाइपस्क्रिप्ट में प्रोजेक्ट (और रिपॉजिटरी) का अनुवाद कर रहा था। अब सब कुछ ठीक काम करता है, और कोड आंख को भाता है।

उदाहरण

मेरी राय में, पुस्तकालय के पास अच्छे दस्तावेज हैं जो उन सभी संभावित मामलों को कवर करते हैं, जिनका आप सामना करेंगे (और यदि नहीं, तो परीक्षणों में आप सब कुछ, गैर-तुच्छ पा सकते हैं)। हालांकि, कम से कम किसी तरह से लेख को कोड के साथ पतला करने के लिए, मैं कनेक्शन और उपयोग के बुनियादी उदाहरण दूंगा, "जीवन" के कुछ उदाहरण, साथ ही यह कैसे सज्जाकारों के साथ मिलकर काम करता है (वहां एक अति सूक्ष्म अंतर है)।

मॉड्यूल निर्माण

वर्गों का उपयोग करके एक मॉड्यूल बनाया जाता है। यह कुछ लोगों के लिए असामान्य रूप से भयावह लग सकता है, लेकिन मेरा विश्वास करो, आपको इसकी जल्दी से आदत है।

स्टोर / 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 }) 

संबंध

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

मॉड्यूल

कनेक्टिंग मॉड्यूल नियमित Vuex में कैसे होता है, इसके समान है। उन्हें रूटस्टोर की मॉड्यूल प्रॉपर्टी में निर्दिष्ट करने की आवश्यकता है:

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

एक घटक के अंदर का उपयोग करें

आप इस वैश्विक संपत्ति के माध्यम से स्टॉर दोनों का उपयोग कर सकते हैं। $ स्टोर, और मैपिंग के माध्यम से, जो कि वुएले में एक के समान है:

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

टाइपिंग

उदाहरण टाइपिंग कमिट और प्रेषण:

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

स्वागत

डेकोरेटर्स का उपयोग करके कनेक्ट करें ( वॉए-प्रॉपर्टी-डेकोरेटर )

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

एक मॉड्यूल के अंदर एक मॉड्यूल का उपयोग करना

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

वॉल्ट रीसेट

कभी-कभी भंडारण को डिफ़ॉल्ट मानों पर रीसेट करना आवश्यक हो सकता है, यह काफी सरलता से किया जाता है:

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

अन्त

मुझे आशा है कि आप रुचि रखते थे, या कम से कम आपको इस पुस्तकालय के बारे में पता चला था। कौन जानता है, शायद अगले प्रोजेक्ट से शुरू हो रहा है (या हो सकता है कि कोने के चारों ओर करंट चालू हो?) आप, मेरी तरह, वेक्स-स्मार्ट-मॉड्यूल (या सामान्य रूप से टाइपस्क्रिप्ट) का उपयोग करना शुरू कर देंगे? व्यक्तिगत रूप से, टाइपस्क्रिप्ट के लिए मेरा संक्रमण बल्कि दर्दनाक था (1.5-2 वर्षों के लिए, मैंने इसे कम से कम 3-4 बार स्विच करने का प्रयास किया, लेकिन हर बार जब मैं कुछ समस्याओं में भाग गया, गलतफहमी हो गई। मुझे अक्सर यह अहसास हो गया था कि टाइपस्क्रिप्ट पर विकास को महसूस किया गया था। पहले की तुलना में 2-3 गुना अधिक समय, क्योंकि अब आप इसे "जल्दी से स्केच कर सकते हैं।" लेकिन एक बार, "स्थैतिक टाइपिंग के उज्ज्वल पक्ष" पर कदम रखते हुए, मुझे लगता है कि प्रकार की शक्ति और वे अंततः कैसे अनुमति देते हैं। विकास प्रक्रिया को गति देना, जो समान रूप से महत्वपूर्ण है, कोड डिबग करना (शायद उसी में 2- 3 बार), साथ ही इसके आगे के समर्थन की सुविधा।

PS इस मॉड्यूल पर स्टार लगाना न भूलें। :)