如何在 Vue3 的 js 文件中访问 Vue 实例？

Posted 2023-02-23

【中文标题】如何在 Vue3 的 js 文件中访问 Vue 实例？

【英文标题】：How do I access Vue instance inside a js file in Vue3?

【发布时间】：2021-10-08 10:48:17

【问题描述】：

在 Vue2 中，我能够访问我的 Vue 实例以使用在 Vue 中注册的组件。

test.js

   import Vue from 'vue'

   export function renderLogin () 
     Vue.toasted.show('Please login again',  type: 'error', duration: 2000 )
   

在上面的代码中，我可以访问 toasted 包，因为我已经在我的 main.js 中使用 Vue 注册了它。但是，在 Vue3 中，我无法使用 toasted 包，因为我无法访问 js 文件中的 Vue 实例。

需要有关如何在 js 文件中访问 Vue 实例（'this'）的帮助。

【问题讨论】：

请分享到包仓库

【参考方案1】：

经过一天的搜索，我能够从 js 文件中的 vue 实例访问 toasted 组件。

首先，我们必须导出应用实例才能在 js 文件中读取它

main.js

export const app = createApp(
   render() 
     return h(AppWrapper);
   ,
);

接下来，我们必须在应用实例的 globalProperties 中注册我们的组件。

app.config.globalProperties.$toast = toast;

我们现在可以在我们的 js 文件中导入应用实例并访问 toast 组件

test.js

import  app  from '@/main.js'

app.config.globalProperties.$toast('Toast working fine', 
    type: 'success',
    duration: 2000,
  )

希望这可以帮助某人。如果有其他/更好的方法，请告诉我。谢谢

【参考方案2】：

// Vue 3 组合 API

    <script>
      import  getCurrentInstance  from 'vue';
    
      export default 
        setup() 
          const _instance = getCurrentInstance();
          const vueInstance = _instance.appContext;
        ,
      ;
    </script>

这与 Vue2 中的方式不完全一样，但这可能会暴露您正在寻找的内容。

---

如果你想让一个包在 Vue3 中全局可用，你可能需要将以下代码添加到插件中：

    //* This will help for accessing the toasted instance in other files (plugins)
    app.config.globalProperties.$toasted = toasted;

    //* This will expose the toasted instance in components with this.$toasted
    app.provide('$toasted', toasted);

有了这个，你可以在 options api 中获取 toasted 实例：this.$toasted

并使用组合 api： const $toasted = _instance.appContext.app.config.globalProperties;

在另一个插件中： constructor(app) app.config.globalProperties;

【讨论】：

嘿，感谢您的回答，但是这个概念不适用于 js 文件，对吧？它仅适用于 Vue 组件。如果我错了，请纠正我

这可以在 js 文件中工作吗？例如，如何访问封装了axios请求的js文件中的$log变量？ API refrence 表示 getCurrentInstance 仅在设置或生命周期挂钩期间有效。

【参考方案3】：

您可以使用provider/inject。

例如，如果您想在我的组件中使用axios，请在您的main.js 中提供axios

import  createApp  from "vue";
import App from "./App.vue";
import axios from "axios";

const app = createApp(App);

app.provide("http", axios);

app.mount("#app");

然后在 SFC 组件中，您可以通过 2 种方式访问​​：

// Composition API
<script>
import  inject  from 'vue'

export default 
  setup() 
    const http = inject("http");
    http.get("https://jsonplaceholder.typicode.com/todos/1").then((response) => 
      console.log(response.data);
    );
  

</script>

// Vue 2 options API
<script>
export default 
  inject: ["http"],

</script>

原答案here。

【讨论】：

请写下您提供的链接内容的简短摘要（即使它是一个 SO 答案）。请记住，此类内容以后可能不再可用，从而使此答案无效。

如前所述，我需要访问 js 文件中的 Vue 实例。