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"/>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现点击展开点击收起效果

    vue实现点击展开点击收起效果

    这篇文章主要介绍了vue实现点击展开,点击收起效果,首先我们需要定义data里面的数据,使用computed对data进行处理,需要的朋友可以参考下
    2018-04-04
  • 详解Vue-基本标签和自定义控件

    详解Vue-基本标签和自定义控件

    本篇文章主要介绍了Vue-基本标签和自定义控件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 使用vant的地域控件追加全部选项

    使用vant的地域控件追加全部选项

    这篇文章主要介绍了使用vant的地域控件追加全部选项,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue+vux vux安装出现错误问题及解决

    vue+vux vux安装出现错误问题及解决

    这篇文章主要介绍了vue+vux vux安装出现错误问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 详解vue2.0的Element UI的表格table列时间戳格式化

    详解vue2.0的Element UI的表格table列时间戳格式化

    本篇文章主要介绍了详解vue2.0的Element UI的表格table列时间戳格式化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-06-06
  • vue实现日历表格(element-ui)

    vue实现日历表格(element-ui)

    这篇文章主要为大家详细介绍了vue实现日历表格(element-ui),文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Vue实现动态路由导航的示例

    Vue实现动态路由导航的示例

    本文主要介绍了Vue实现动态路由导航的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 浅谈mvvm-simple双向绑定简单实现

    浅谈mvvm-simple双向绑定简单实现

    本篇文章主要介绍了浅谈mvvm-simple双向绑定简单实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue.js+element 默认提示中英文操作

    vue.js+element 默认提示中英文操作

    这篇文章主要介绍了vue.js+element 默认提示中英文实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue中插槽(slot)几种类型的使用方法

    vue中插槽(slot)几种类型的使用方法

    本文主要介绍了vue中插槽(slot)几种类型的使用方法,主要分三种,默认插槽,具名插槽,作用域插槽,下面就来一起介绍一下,感兴趣的可以了解一下
    2024-03-03

最新评论