Как обрабатывать типы для введенных свойств в Vue Composition API - Typescript

#vue.js #nuxt.js #vuejs3 #vue-composition-api

Вопрос:

 import firebase from 'firebase'
import Vue from 'vue'

/* This file simply imports the needed types from firebase and forwards them */
declare module 'vue/types/vue' {
  interface Vue {
    $fireStore: firebase.firestore.Firestore
    $fireDb: firebase.database.Database
    $fireFunc: firebase.functions.Functions
    $fireStorage: firebase.storage.Storage
    $fireAuth: firebase.auth.Auth
    $fireMess: firebase.messaging.Messaging
  }
}

В обычном проекте typescript с Vue 2 мы можем это сделать. Но когда я использую Composition API, как я могу вводить подобные свойства в root функцию on setup(_, { root}) ?
Поэтому я не могу использовать with root.$fireStore …

Теперь я должен использовать его с any типом like (root as any).$fireStore . Так что надеюсь, что кто-нибудь может помочь моей команде. Сейчас мы работаем над проектом с Nuxt Composition.

Ответ №1:

это примерно то же самое в vue 3, но не тот же модуль

 declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $fireStore: firebase.firestore.Firestore
        $fireDb: firebase.database.Database
        $fireFunc: firebase.functions.Functions
        $fireStorage: firebase.storage.Storage
        $fireAuth: firebase.auth.Auth
        $fireMess: firebase.messaging.Messaging
    }
}

1. Можете ли вы это объяснить? Я пытался, но это не работает: (

2. хорошо, я пропустил ваш вопрос, я думал, вы хотите это.$ fireStore а не root. $ fireStore

3. Фактически, я хочу сделать это -> root.$ fireStore. Я использую Nuxt и у меня есть папка types to define the shim.d.ts , поэтому я пишу код, как вы, в vue.shimd.ts —> это не работает: (

Ответ №2:

Как насчет создания composable для firebase?

 import firebase from 'firebase'

export default function useFirebase() {
    return {
        fireStore: firebase.firestore.Firestore
        fireDb: firebase.database.Database
        fireFunc: firebase.functions.Functions
        fireStorage: firebase.storage.Storage
        fireAuth: firebase.auth.Auth
        fireMess: firebase.messaging.Messaging
    };
};

А затем использовать его в своем setup() компоненте:

 export default defineComponent({
    setup() {
        const {fireStore, fireDb, fireFunc, fireStorage, fireAuth, fireMess} = useFirebase();
    }
});

1. Ооп, это пример. В моем случае мы используем @nuxtjs / apollo lib -> Вводим некоторую функцию для apollo, например apolloHelpers -> Код ссылки на эту функцию в lib . Затем мы хотим ввести { root }: Context setup функцию on

2. Тем не менее, я думаю, вы также могли бы достичь почти того же, если вы используете composable для упаковки этих помощников. Лично мне не нравится дополнять корневой экземпляр множеством вещей. Vue router также теперь имеет два составных useRoute и useRouter вместо введенного this.$router. Кажется, они работают над этим: github.com/nuxt-community/apollo-module/issues/288

Ответ №3:

Да, через несколько дней я нашел временное решение для этого. Просто добавьте a nuxt.d.ts или свою types папку следующим образом. Таким образом, вы можете использовать $apolloHelpers в своих экземплярах Vue и промежуточном программном обеспечении…

 import { SetupContext } from '@vue/composition-api'

/**
 * @description Define type for $apolloHelpers --> copy from Apollo module --> inject Apollo Helpers
 * @docs https://github.com/nuxt-community/apollo-module/blob/master/lib/templates/plugin.js#L141
 */

declare module '@nuxt/types' {
  interface Context {
    $apolloHelpers: {
      onLogin(token, apolloClient, cookieAttributes, skipResetStore = false)
      onLogout(apolloClient, skipResetStore = false)
      getToken(tokenName?: string)
    }
  }

  interface NuxtAppOptions {
    $apolloHelpers: {
      onLogin(token, apolloClient, cookieAttributes, skipResetStore = false)
      onLogout(apolloClient, skipResetStore = false)
      getToken(tokenName?: string)
    }
  }
}

declare module 'vue/types/vue' {
  interface Vue {
    $apolloHelpers: {
      onLogin(token, apolloClient, cookieAttributes, skipResetStore = false)
      onLogout(apolloClient, skipResetStore = false)
      getToken(tokenName?: string)
    }
  }
}

Ответ №4:

Я не знаю, поможет ли это вам, но есть root.$store. $ fireAuth

Ответ №5:

вставьте @nuxt/types в свой файл tsconfig.json, и типы будут работать