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

Posted 2023-03-16

【中文标题】在组合 api 中使用注入变量（nuxt.firebase）

【英文标题】：Use injected variables (nuxt.firebase) in composition api

【发布时间】：2021-01-28 03:47:35

【问题描述】：

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

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

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


// or

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

【参考方案1】：

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

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

<template></template>

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

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

访问 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>

Rickroll 如果你能正常工作！

【讨论】：

真的有用吗？它给了我 v-on: error?