vue.js - نوع فروشگاه Vuex با Typescript

من در تلاش هستم که یک فروشگاه Vuex را با TypeScript سازگار کنم. من فروشگاه را همانطور که در اینجا توضیح داده شده، میسازم. با این حال، وقتی از یک کامپوننت به this.$store دسترسی پیدا میکنم، نوع آن Store است.

من نتوانستم بفهمم چگونه آن را طوری تغییر دهم که به طور پیشفرض به Store<MyState> تنظیم شود بدون اینکه هر بار نیاز به تبدیل نوع باشد.

پاسخ شماره ۱

متأسفانه غیرممکن است که نوع Store<any> که توسط تایپهای VueX تعریف شده است را با یک نوع خاصتر بازنویسی کنید. بهترین کاری که توانستم انجام دهم این بود که یک فیلد دوم اضافه کنم که $store را برگرداند اما به صورت درست تایپ شده باشد تا مجبور نباشید در همه جا از تبدیل نوع استفاده کنید یا آن را در تمام کامپوننتهای خود اعلام کنید:

import { Store } from "vuex";

// Type the $tstore properly, which is the same as $store but properly typed.
// Unfortunately you cannot override the Store<any> type.
declare module "vue/types/vue" {
  interface Vue {
    $tstore: Store<State>;
  }
}

// Set $tstore to be a getter that simply returns $store.
Object.defineProperty(Vue.prototype, "$tstore", {
  get: function() {
    return this.$store as Store<State>;
  },
  enumerable: true,
});

پاسخ شماره ۲

اگر کسی با این مواجه شد - ما با بازتعریف نوعی که سازنده بازمیگرداند، این مشکل را دور زدیم -

import Vue, { VueConstructor } from 'vue'
import { Store } from 'vuex'
import { RootState } from '@/store/types'

abstract class VueStrongClass extends Vue {
    public $store!: Store<RootState>
}
const VueStrong = Vue as VueConstructor<VueStrongClass>;

export default VueStrong;

و بعد ما فقط

export default VueStrong.extend({
    name: 'name',

    components: {
        componentA,
        componentB,
},

که سپس به ما اجازه میدهد از تایپ کردن بهدرستی استفاده کنیم:

methods: {
sessionStarted(): Boolean | undefined {
    return this.$store.state.sessionState?.session.started;
},