回答編集履歴
1
ソースコードにファイル名を追記しました。
answer
CHANGED
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
**自分がやった方法**
|
|
5
5
|
拡張したプラグイン（今回のケースではaxios）を作成する。
|
|
6
|
+
```vue
|
|
6
|
-
|
|
7
|
+
// ~/plugins/api.ts
|
|
7
8
|
import { NuxtConfig } from '@nuxt/types';
|
|
8
9
|
import { NuxtAxiosInstance } from '@nuxtjs/axios';
|
|
9
10
|
|
|
@@ -23,12 +24,13 @@
|
|
|
23
24
|
}
|
|
24
25
|
```
|
|
25
26
|
で、それを有効にする。
|
|
27
|
+
```vue
|
|
26
|
-
|
|
28
|
+
// nuxt.config.ts
|
|
27
29
|
plugins: ['~/plugins/api'],
|
|
28
30
|
```
|
|
29
31
|
|
|
30
32
|
すると`$api`というのが使えるようになり、asyncDataとmethods、其々以下のように置き換えることが出来き、冗長が解消されました。
|
|
31
|
-
```
|
|
33
|
+
```vue
|
|
32
34
|
async asyncData ({ app }) {
|
|
33
35
|
// const response = await $axios.get('/api/blogs');
|
|
34
36
|
const response = await app.$api.getBlogs();
|