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