vueプロジェクトにaxiosを導入して、vue-routerを使うようにaxiosを使います.


タイトルにvue-routerを使うようにaxiosを使うというのは、Vue.prototypeに$axiosを入れるということです.
Object.defineProperty(Vue.prototype, '$axios', {
  get () { return axios }
})
        この問題を解決するための道程を紹介します.興味のあるものは見てもいいです.
        axiosはvue-resouresのようにvueのプラグインではなく、直接useしてから全体的に使えるようになりました.最近vueに接触し始めたので、vueのプラグインを書きたいです.axiosをプラグインに入れたいと思っています.まさか、この考えは私に大きな輪を巡って解決させました.
        まずvuexのソースコードを参考にして、次のコードを書きました.
import axios from 'axios'

class green {
	constructor (m_axios) {
		this.m_axios = axios;
	}

	printSomething () {
		console.log('something...')
	}
}

function install (Vue) {
	Vue.mixin({
	    beforeCreate: function () {
	        const options = this.$options
	        // green injection
	        if (options.green) {
	          this.$green = typeof options.green === 'function'
	            ? options.green()
	            : options.green
	        } else if (options.parent && options.parent.$green) {
	          this.$green = options.parent.$green
	        }
	    }
	})
}

export default {
	green,
	install
}
このように、this.$green.axios.getによって使用できます.しかし、厳密な私はどのようにして、$greenの存在を許可することができますが、目障りです.vue-routerのソースコードを見に行きました.問題解決の鍵を発見しました.
  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })
元々はVueの原型に属性をつければいいです.        まとめてみます.最初に問題を解決する方向があまり正しくないので、回り道をしてしまいましたが、やはり自分の基礎知識がしっかりしていないので、本をたくさん読みます.