vue项目中js文件使用vue的this实例说明

 更新时间:2022年12月07日 08:37:27   作者:牛先森家的牛奶  
这篇文章主要介绍了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项目中显示不出来的解决

    这篇文章主要介绍了mui-player自定义底部导航在vue项目中显示不出来的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue路由传参详细介绍

    Vue路由传参详细介绍

    这篇文章主要介绍了Vue路由传参的两种方式query和params,介绍了query和params区别与总结,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Element-ui的table中使用fixed后出现行混乱情况的解决

    Element-ui的table中使用fixed后出现行混乱情况的解决

    这篇文章主要介绍了Element-ui的table中使用fixed后出现行混乱情况的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 利用vueJs实现图片轮播实例代码

    利用vueJs实现图片轮播实例代码

    本篇文章主要介绍了利用vueJs实现图片轮播实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue自定义指令封装节流函数的方法示例

    Vue自定义指令封装节流函数的方法示例

    本篇文章主要介绍了Vue自定义指令封装节流函数的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue swipeCell滑动单元格(仿微信)的实现示例

    vue swipeCell滑动单元格(仿微信)的实现示例

    这篇文章主要介绍了vue swipeCell滑动单元格(仿微信)的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别

    详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别

    这篇文章主要介绍了详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue3+ts import引入第三方js文件报错的2种解决方法

    vue3+ts import引入第三方js文件报错的2种解决方法

    这篇文章主要给大家介绍了关于vue3+ts import引入第三方js文件报错的2种解决方法,在Vue中通常我们引入一个js插件都是使用npm方式下载然后import使用的,需要的朋友可以参考下
    2023-08-08
  • nuxt引入组件和公共样式的操作

    nuxt引入组件和公共样式的操作

    这篇文章主要介绍了nuxt引入组件和公共样式的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue prop属性传值与传引用示例

    vue prop属性传值与传引用示例

    今天小编就为大家分享一篇vue prop属性传值与传引用示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论