問題
在nuxt.js中,通過plugins引入了iview元件庫,然後在一個vue元件中引入了一個發送請求用的 js 檔案,如下
<template>
...
</template>
<script>
import API from "@/api/index.js";
export default {
...
}
</script>
在這個引入的 js 檔案中,想要在axios攔截器中使用iview的spin元件做出提示,但是這裡通過
import Vue from "vue";
引入vue對象,使用iview内置全局
$Spin
方法,報錯
Vue.prototype.$Spin
是undefined。若在上面的vue元件中使用
this.$Spin
卻是正常的。
import axios from "axios";
import Vue from "vue";
axios.interceptors.request.use(
config => {
Vue.prototype.$Spin.show(); // 報錯:Cannot read properties of undefined (reading 'show')
return config;
},
error => {
Vue.prototype.$Spin.hide(); // 報錯
return Promise.reject(error);
}
);
... ...
解決
nuxt 執行個體初始化完畢以後會在 window 全局注入
$nuxt
,這個
$nuxt
就是最外層的Vue;是以改寫成
$nuxt.$Spin
就可以。需要注意的是,初始化完畢之前無法通路
$nuxt
。
另外,也可以在
$nuxt
中擷取到 store 和 router ,分别是
$nuxt.$store
和
$nuxt.$router
參考資料
nuxtjs如何在單獨的js檔案中引入store和router