在组合 api 中使用注入变量（nuxt.firebase）

Question

我在我的Vue项目中使用composi api和nuxt.js firebase模块，我想调用注入到模块中的变量，例如$ fireAuth，但是我没有找到解决方案。

下面是一个关于我希望它如何工作的小代码培训：

export default createComponent({
  setup(_props, { root }) {
   root.$fireAuth= ..
  }
}

// or

export default createComponent({
  setup(_props, { root , $fireAuth }) {
  
  }
}

Answer 1

我有一个解决方法，它有效！ （暂时。）

1. 创建一个虚拟组件（例如 AppFirebase.vue）

<template></template>

<script lang="ts">
    import Vue from "vue";

    export default Vue.extend({
        created() {
            this.$emit("init", this.$fire);
        },
   });
</script>

1. 访问 NuxtFireInstance（例如 SomeComponent.vue）

<template>
    <fire @init="initFB"></fire>
</template>

<script lang="ts">
import {
    defineComponent,
    reactive,
} from "@nuxtjs/composition-api";
import fire from "@/components/AppFirebase.vue";

export default defineComponent({
    components: { fire },
    setup() {
        let _fire: any = reactive({});

        const initFB = (fire: any) => {
            _fire = fire;
        };

        const signout = async () => {
            try {
                await _fire.auth.signOut().then(() => {
                    // do something
                });
            } catch (error) {
                console.log(error);
            }
        };

        return {
            initFB,
            _fire,
            signout,
        };
    },
});
</script>

1. Rickroll 如果你能正常工作！