https://virgool.ir/feed/@zahraesfandiaryy1999fa2026-11-11 17:07:38https://virgool.ir/images/default-avatar.jpghttps://virgool.ir/@zahraesfandiaryy1999https://virgool.ir/@zahraesfandiaryy1999/استفاده-از-vue-module-decorators-در-vuex-tlcjemrefjflتوی یکی از پروژه هایی که جدیدا توش شریک شدم از این پکیج استفاده شده بود خواستم هرچی خوندمو باهاتون به اشتراک بذارم.درواقع این پکیج برای این استفاده میشه که نوشتن 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سر بزنید.زهرا اسفندیاریزهرا اسفندیاریFri, 20 Aug 2021 18:27:12 +0430