如何在Vue Composition API中处理注入属性的类型-Typescript

如何解决如何在Vue Composition API中处理注入属性的类型-Typescript

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

在带有Vue 2的普通打字稿项目中，我们可以做到这一点。但是，当使用Composition API时，如何在函数root的{​​{1}}中注入类似的属性？ 所以我不能和setup(_,{ root}) ...

一起使用

现在，我必须将其与root.$fireStore之类的any类型一起使用。因此，希望任何人都可以帮助我的团队。我们现在正在使用Nuxt Composition进行项目。

解决方法

在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
    }
}

,

如何为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();
    }
});

,

是的，几天后，我为此寻求了临时解决方案。只需添加一个nuxt.d.ts或您的types文件夹即可。因此，您可以在Vue实例和中间件中使用$apolloHelpers ...

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,skipResetStore = false)
      getToken(tokenName?: string)
    }
  }
}

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

,

我不知道它是否对您有帮助，但是有root。$ store。$ fireAuth

,

在您的tsconfig.json文件中插入@nuxt/types，这些类型将起作用