问题
在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