Vue在单独引入js文件中使用ElementUI的组件
问题场景：
我想在vue中的js文件中使用elementUI中的组件，因为我在main.js中引入了element包和它的css，并挂载到了全局vue实例中。然后我就在js文件中这样使用
this.$notify({
title: "失败",
message: "请先登录老铁~",
type: "error"
});
结果报错了，报错信息如下
TypeError: _this.$notify is not a function
at index.js:44
2019-03-26更新
import axios from 'axios'
// 注意：在js文件中使用element组件 按照下面更优雅哦~~
import {
Message,
MessageBox
} from 'element-ui'
import store from '../store'
import {
getToken
} from '@/utils/auth'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
timeout: 5000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
const res = response.data
if (res.code !== 20000) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
MessageBox.confirm(
'你已被登出，可以取消继续留在该页面，或者重新登录',
'确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
}
return Promise.reject('error')
} else {
return response.data
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
解决：
在该js文件中
//1.引入vue
import Vue from 'vue';
//2.新创建一个vue实例
let v = new Vue();
//3.在新的实例上使用组件
v.$notify.error({
title: '错误',
message: '未登录 或者token过期'
});
附上我的全局拦截器
axios/index.js
//引入vue
import Vue from 'vue';
import axios from 'axios';
//新创建一个vue实例
let v = new Vue();
//全局状态控制引入
import store from '../store/store';
import * as types from '../store/mutation-types';
import router from '../router'
// http request 拦截器
axios.interceptors.request.use(
config => {
if (store.state.userInfo.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.Authorization = `JWT ${store.state.userInfo.token}`;
}
// config.headers.imooc = `5429026`;
return config;
},
err => {
return Promise.reject(err);
});
// http response 拦截器
axios.interceptors.response.use(
undefined,
error => {
let res = error.response;
switch (res.status) {
case 401:
// 返回 401 清除token信息并跳转到登录页面
// store.commit(types.LOGOUT);
//router.replace({
// path: '/app/login',
// query: {redirect: router.currentRoute.fullPath}
//})
console.log('未登录 或者token过期');
this.$notify({
title: "失败",
message: "请先登录老铁~",
type: "error"
});
case 403:
console.log('您没有该操作权限');
// alert('您没有该操作权限');
case 500:
console.log('服务器错误');
// alert('服务器错误');
}
return Promise.reject(error.response.data) // 返回接口返回的错误信息
});