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')  ,  哈哈,  你再調用接口,  大功告成!