背景
- Nuxt.jsで動いているSPAアプリをVue.jsに解体してほしい的な話があり、部分部分をTipsとして投稿します。
- APIはLaravel(6.x)です。なおLaravelとNuxt.jsは同一リポジトリです(なぜ)
- Nuxt.jsは2.9。Vueは2.6.10
- 今回はAxios編です。
Vue.jsでthis.$axiosを使えるようにPluginを作る
resources/js/plugin/axios.js
import axios from "axios"
const AxiosPlugin = {}
AxiosPlugin.install = function (Vue) {
Vue.prototype.$axios = axios;
}
export default AxiosPlugin;
あとはPluginを読み込むだけで、this.$axiosが使えます。
resources/js/app.js
import Vue from "vue";
import router from '~/router'
import App from '~/App.vue'
import AxiosPlugin from '~/plugin/axios';
Vue.use(AuthPlugin)
new Vue({
router: router,
render: h => h(App),
}).$mount('#app')
Nuxt.jsでのonRequestやonErrorを使いたい場合
Nuxt.js Axios ModuleのonRequestやonErrorを使いたい時があると思います。
その時はinterceptorsを使います。
resources/js/plugin/axios.js
import axios from "axios"
const AxiosPlugin = {}
AxiosPlugin.install = function (Vue) {
Vue.prototype.$axios = axios;
Vue.prototype.$axios.interceptors.response.use(
function (response) {
console.info(response)
return response;
},
function (error) {
console.error(error)
return Promise.reject(error);
}
}
export default AxiosPlugin;
参考
##関連リンク