استفاده از vuex-module-decorators در vuex

توی یکی از پروژه هایی که جدیدا توش شریک شدم از این پکیج استفاده شده بود خواستم هرچی خوندمو باهاتون به اشتراک بذارم.

درواقع این پکیج برای این استفاده میشه که نوشتن vuex توی پروژه هارو برای ما راحت تر کنه.
اگر از ماژول بندی توی vuex استفاده کرده باشید، حتما دیدید که یکم کار پیچیده ایه.
درحالی که با استفاده از این پکیج میتونید ماژولهارو به صورت کلاس به سادگی بنویسید.

import { Module, VuexModule } from 'vuex-module-decorators'

@Module
export default class MyModule extends VuexModule {
}

حالا برای اینکه مثلا یک State رو داخل این ماژول قرار بدیم، کافیه فقط به صورت زیر بنویسیمش:

@Module
export default class Vehicle extends VuexModule {
  wheels = 2
}

اگر به gettersاحتیاج دارید:

export default class Vehicle extends VuexModule {
  wheels = 2
  get axles() {
    return this.wheels / 2
  }
}

و اگر به Mutation احتیاج دارید:

import { Module, VuexModule, Mutation } from 'vuex-module-decorators'

@Module
export default class Vehicle extends VuexModule {
  wheels = 2

  @Mutation
  puncture(n: number) {
    this.wheels = this.wheels - n
  }
}

و برای نوشتن Action هم کافیست:

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
import { get } from 'request'

@Module
export default class Vehicle extends VuexModule {
  wheels = 2

  @Mutation
  addWheel(n: number) {
    this.wheels = this.wheels + n
  }

  @Action
  async fetchNewWheels(wheelStore: string) {
    const wheels = await get(wheelStore)
    this.context.commit('addWheel', wheels)
  }
}

همانطور که دیدید، این پکیج کار ماژول بندی کردن vuex را بسیار راحت تر میکند.
من فقط سعی کردم اینجا بهتون معرفیش کنم.

برای دیدن همه ی مزیتهای این پکیج میتونین به سایت
https://championswimmer.in/vuex-module-decorators/pages/core/actions.html
سر بزنید.