在vue中，如何在外部js触发vue组件的data修改？

Question

我把所有接口请求都封装到了model/api.js下，在api.js里做axios请求，请求的返回里有一种错误码是未登陆，我需要对这种情况的时候弹窗登录。请问，这个弹窗我要怎么实现呢？如果弹窗是写在main.vue里，那我需要在api.js里修改main.vue的data或者这个data是vuex的store，那我需要在api.js里修改store有什么好办法或者例子吗？，谢谢sf的大佬

Answer 1

import store from '../store/store'

import axios from 'axios'

import {SET_TOAST_INFO, SET_LOADING_STATE} from '../store/type'

axios.interceptors.request.use(config => {

    return config

}, error => {

    store.commit(SET_TOAST_INFO, {

        mode: 'danger',

        title: '貌似网络出错了，麻烦您检查下网络是否良好再来试试吧！'

    });

    return Promise.reject(error)

})

// http响应拦截器

axios.interceptors.response.use(data => {

    return data.data;

}, error => {

    if (error.response) {

        store.commit(SET_LOADING_STATE,  false);

        switch (error.response.status) {

            case 401:

                store.commit(SET_TOAST_INFO, {

                    mode: 'danger',

                    title: '您还没有登陆呢，马上进行登陆吧'

                });

                window.location.href = '/#/login';

                break;

            default:

                store.commit(SET_TOAST_INFO, {

                    mode: 'danger',

                    title: '貌似网络出错了，麻烦您检查下网络是否良好再来试试吧！'

                });

                break;

        }

    }

})