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

Question

问题描述

• 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.

• 报错截图

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

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

Answer 1

在api.js中引入

import { Toast } from 'vux'

之后

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