vue 设置全局变量并且可以在浏览器控制台更改

后端提供了一个接口，要求可以在浏览器控制台更改参数，以方便后端可以随时更改参数

• 新建一个存放全局变量的js文件，如: params.js，内容如下:

export default {
    de:'qweqweqweqwe',     //封装的axios中要用到的默认值
    setParams(v){　　　　　　//用于浏览器修改全局变量"de" 
        this.de= v
    }
}

• main.js 

import params from './params'   //引入params.js
Vue.prototype.$params = params  //挂载到vue实例上,以便项目随处可用
const vm = new Vue({　　　　　　　　//vue实例定义为变量
  router,
  store,
  render: h => h(App)
}).$mount('#app')
window.params= vm.$params　　　　//挂载到window对象上,以便浏览器可以访问
export default vm　　　　　　　　　//把vue实例暴露出去,以便js文件可以访问到vue实例

• request.js (封装的axios文件)

import axios from 'axios'
import vm from '@/main'        //引入main.js以便访问vue实例

axios.interceptors.request.use(
  config => {
    config.params = { 'xxxxxxxx': vm.$params.de }   //这里要用到params.js定义的de(默认值)
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

 

---

 

　　现在可以打开浏览器控制台，输入params，会出现:

{
    de:'qweqweqweqwe',    
    setParams(v){　　　　　　
        this.de= v
    }
}

　　输入params.setParams('abcdefg')  ,  哈哈,  你再调用接口,  大功告成!