vue框架中,如何在api.js 文件内 使用toast

问题描述

  • ui框架用的 vux
  • main.js 引入 toast
    import {Toast ,ToastPlugin} from 'vux'
    Vue.use(ToastPlugin, {position: 'middle'})
  • api.js 使用toast
    import axios from 'axios';
    
    axios.interceptors.response.use(data=> {
        return data;
      }, err=> {
        // console.log(err.response);
          if(err.response !== undefined && err.response.status == 400){
              console.log(err.response);
            // Message.error({message: err.response.message});
                console.log(this);
            this.$vux.toast.show({
               text: 'hello billo...'
             })
            if(err.response.data.message === "授权过期,请重新登录!"){
                sessionStorage.removeItem('user');
                this.$router.push({ path: '/webchat' });
            }
          }
           return Promise.reject(err);
       })
  • 报错 this.$vux 的 toast is undefined
  • 文件结构
src
├── api
│   ├── api.js
│   └── index.js
├── main.js

问题出现的环境背景及自己尝试过哪些方法

  • 直接在 api.js 引入Toast模块
import {Toast} from 'vux'

提示module not find.

  • 报错截图

clipboard.png

clipboard.png

  • 其他组件内 import {Toast} from ‘vux’ 并console.log(Toast) 的结果如下:

clipboard.png

请教一下,如何处理,才能在 api.js 的 axios.interceptors.response.use 的匿名函数内正常的使用vux的Toast呢?

回答:

api.js中引入

import { Toast } from 'vux'

之后

Toast.show({
    text: 'hello billo...'
})

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注