كان الدافع وراء كتابة هذه المقالة مقالًا آخر عن كتابة Vue ، وبالتالي ، Vuex . لدهشتي ، لم أجد إشارة إلى وحدة نمطية ، والتي ، في رأيي ، هي الأفضل من نوعه في Vuex. البحث عن Habr ، وبالفعل عن Runet (في الواقع ، وفي المصادر الإنجليزية ، ليس من السهل العثور على أي مراجع على الفور) ، للأسف ، لم تسفر عن أي نتائج. هذه المقالة ليست تحليلًا مفصلًا ودليلًا متعدد الصفحات حول الاستخدام والتكوين ، بل هي وسيلة لمشاركتك معك ، عزيزي Vue-ninja ، وهي أداة تؤدي وظيفتها بشكل مثالي.

vuex الذكية وحدة

من ليس لديه وقت على الإطلاق: جيثب .

الغرض الرئيسي من الوحدة ، كما قد تفكر ، هو التغطية الكاملة لتخزين Vuex بأنواعها. داخليا ومباشرة في المكونات نفسها. تمت كتابة الوحدة بواسطة المساهم الرئيسي ( @ ktsn ) في مكتبات Vuex و vue-class .

ماء

للاعتراف ، لم يبدأ طريقي في Typescript مؤخرًا ، بما في ذلك ومع أشياء مثل الديكور ، لذلك لا يمكنني مقارنة هذه المكتبة مع النظائر الأخرى. أدت محاولاتي لتكوين واستخدام أدوات أخرى (على سبيل المثال ، وحدة تصميم وحدات vuex ) إلى مشاكل مختلفة ، والتي في النهاية لم تسمح لي بطريقة ما أن أدرك ما أحتاجه (أو أنا فقط لم أعرف كيف أطبخها ، كما يقولون). كنت محظوظًا جدًا باستخدام الوحدة النمطية vuex-smart - ظهرت المكتبة في اللحظة التي كنت أترجم فيها المشروع (والمستودع) إلى Typescript. الآن كل شيء يعمل بشكل جيد ، والرمز هو ارضاء العين.

أمثلة

تحتوي المكتبة ، في رأيي ، على وثائق جيدة تغطي جميع الحالات المحتملة التي ستواجهها (وإذا لم يكن الأمر كذلك ، في الاختبارات يمكنك أن تجد كل شيء آخر غير تافه). ومع ذلك ، من أجل التخفيف بشكل ما من المقالة على الأقل بطريقة ما مع الكود ، سأقدم أمثلة أساسية عن الاتصال والاستخدام ، وبعض الأمثلة على "الحياة" ، وكيف تعمل بالتزامن مع الديكور (هناك فارق بسيط هناك).

إنشاء وحدة

يتم إنشاء وحدة باستخدام الطبقات. قد يبدو هذا مخيفًا بشكل غير معتاد للبعض ، لكن صدقوني ، تعتاد على ذلك بسرعة.

متجر / الجذر

//    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 العادي. يجب تحديدها في خاصية الوحدات النمطية لـ RootStore:

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

استخدام داخل مكون

يمكنك استخدام الحفظ من خلال الخاصية العالمية بهذا. $ Store ، ومن خلال التعيين ، والتي تشبه من نواح كثيرة الموجودة في 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) } }) 

الكتابة

مثال على كتابة الالتزام وإرسال:

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

خاتمة

أتمنى أن تكون مهتمًا ، أو على الأقل تعرفت على هذه المكتبة. من يدري ، ربما يبدأ من المشروع التالي (أو ربما إعادة بناء المشاريع الحالية قاب قوسين أو أدنى؟) أنت ، مثلي ، ستبدأ في استخدام الوحدة النمطية vuex-smart (أو Typescript بشكل عام)؟ شخصيًا ، كان الانتقال إلى Typescript مؤلمًا إلى حد ما (لمدة تتراوح بين 1.5 و 2 عامًا ، وقد قمت بمحاولات للتبديل إليه من 3 إلى 4 مرات على الأقل ، ولكن في كل مرة واجهت فيها بعض المشاكل ، وسوء الفهم. مرتان أو أكثر من الوقت من قبل ، لأنه الآن لا يمكنك "رسمها بسرعة". ولكن مرة واحدة ، أثناء التنقل على "الجانب المشرق من الكتابة الثابتة" ، شعرت بقوة الأنواع وكيف تسمح في النهاية تسريع عملية التطوير ، وهو أمر مهم بنفس القدر ، تصحيح الكود (ربما في نفس 2- 3 مرات) ، وكذلك تسهيل دعمها الإضافي.

سكرتير خاص لا تنسى أن تضع نجمة على هذه الوحدة. :)