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

Question

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 时，如何在函数 setup(_, { root}) 的 root 中注入这样的属性？所以我不能使用 root.$fireStore...

现在，我必须像 (root as any).$fireStore 这样的 any 类型使用它。所以希望任何人都可以帮助我的团队。我们现在正在用 Nuxt Composition 做一个项目。

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

Answer 2

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

Answer 3

是的，几天后，我找到了临时解决方案。只需像这样添加 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, 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)
    }
  }
}

Answer 4

不知道对你有没有帮助，不过有root.$store.$fireAuth

Answer 5

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

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

How to handle types for injected properties in Vue Composition API - Typescript

vue.js

nuxt.js

vuejs3

vue-composition-api