vue项目中js文件使用vue的this实例说明
vue中其他.js文件使用this实例
在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from ‘vue’),这样很麻烦。
在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入。
main.js中导出vue
let vue = new Vue({ router, store, // i18n, render: h => h(App) }).$mount('#app'); export default vue
request.js中导入main.js并使用
import axios from 'axios'; import { getAccessToken, getRefreshToken, getAccessTokenTTL } from '@/utils/auth' import _this from '../main.js' const service = axios.create({ timeout: 120000, baseURL: process.env.VUE_APP_BASE_API // withCredentials: true, // 跨域时携带cookies }) service.interceptors.request.use( async config => { // 防止缓存,给get请求加上时间戳 if (config.method === 'get') { const url = config.url url.indexOf('?') === -1 ? config.url = url + '?_=' + (new Date().getTime()) : config.url = url + '&_=' + (new Date().getTime()) } const token = getAccessToken('token') if (token) { config.headers['Authorization'] = token } return config }, err => Promise.reject(err) ) service.interceptors.response.use( response => { return response.data }, async error => { switch (error.response.data.code) { case 910005: // 返回910005 缺失accessToken case 910006: // 返回910006 获取SESSIONID失败 case 910007: // 返回910007 accessToken过期 case 910008: // 返回910008 找不到用户信息 case 910009: // 返回910007 refreshToken过期 // console.log('跳转登录页'); _this.$router.push('/login') break default: console.log('err' + error) } return Promise.reject(error) } ) export default service
vue模板使用this问题
在Vue模板中,this是隐式的(这就是为什么console.log不能从模板中工作的原因),所以可以跳过它,使用store存储相应数据
<input :value="$store.state.shareUrl"/>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
mui-player自定义底部导航在vue项目中显示不出来的解决
这篇文章主要介绍了mui-player自定义底部导航在vue项目中显示不出来的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-12-12Element-ui的table中使用fixed后出现行混乱情况的解决
这篇文章主要介绍了Element-ui的table中使用fixed后出现行混乱情况的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
这篇文章主要介绍了详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08vue3+ts import引入第三方js文件报错的2种解决方法
这篇文章主要给大家介绍了关于vue3+ts import引入第三方js文件报错的2种解决方法,在Vue中通常我们引入一个js插件都是使用npm方式下载然后import使用的,需要的朋友可以参考下2023-08-08
最新评论