vueプロジェクトにaxiosを導入して、vue-routerを使うようにaxiosを使います.
タイトルにvue-routerを使うようにaxiosを使うというのは、Vue.prototypeに$axiosを入れるということです.
axiosはvue-resouresのようにvueのプラグインではなく、直接useしてから全体的に使えるようになりました.最近vueに接触し始めたので、vueのプラグインを書きたいです.axiosをプラグインに入れたいと思っています.まさか、この考えは私に大きな輪を巡って解決させました.
まずvuexのソースコードを参考にして、次のコードを書きました.
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の原型に属性をつければいいです. まとめてみます.最初に問題を解決する方向があまり正しくないので、回り道をしてしまいましたが、やはり自分の基礎知識がしっかりしていないので、本をたくさん読みます.