teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問nuxt.js vuexのstore で axiosからAPI の取得ができません

編集履歴

質問編集履歴

1

表題誤字修正　該当コードと環境設定の記載順を入れ替えました。package.jsonの記述を追加。actions内のコードの記述を追加。リード文を修正

2020/06/12 00:57

投稿

e_nasu
e_nasu

スコア11

test CHANGED
@@ -1 +1 @@
1
- nuxt.js vuexのstore で axios のデータが所得できません
1
+ nuxt.js vuexのstore で axiosからAPI の取得ができません
test CHANGED
@@ -1,18 +1,192 @@
1
- 別の問題があり、内容を切り分けるために　既に動いている部分の簡易版を別プロジェクトに移植したのですが、`store/index.js` に記載した `axios` で API が取得できなくなってしまいました。何か単純なことを見落としていると思うのですが　色々やっても気がつきません。お力を貸して下さい。
1
+ 別の問題があり、内容を切り分けるために　既に動いている部分の簡易版を別プロジェクトに移植したのですが、`store/index.js` に記載した `axios` で API が取得できなくなってしまいました。actionsの発火コードが必要ですか？
2
-
2
+
3
- ---
3
+ ---
4
-
5
-
6
-
4
+
5
+
6
+
7
- - APIの発行に問題はないと思います。　`pages/` に配置した別コード （この質問の一番下に記載　) で取得できます。
7
+ - APIの発行に問題はないと思います。　`pages/` に配置した別コード （　以下（<4>に記載　) で取得できます。
8
8
 
9
9
  - 設定ファイル`nuxt.config.js` は下に記載しました。移植元のものと差異はないと思います。
10
10
 
11
11
  - 現状でエラーは出力されていません。`record`は `null` となっています。（vue.js Devtools のvuex から）
12
12
 
13
- - ブレークポイントを 以下にに設置しましたが、async 以下には止まりません。(移植元は 止まります)
13
+ - ブレークポイントを 以下<5>に設置しましたが、async 以下には止まりません。(移植元は 止まります)
14
+
15
+
16
+
14
-
17
+ - 再度プロジェクトを作成し直しましたが状況は同じです。
18
+
15
-
19
+ - package.json 内の各々のversionも一致しています。
20
+
21
+ - actions内のコードを`getRecord` ⇒ `asyncData`や`fetch` をに代えてみましたが状況に変わりありません。
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+ **<1> store/index.js は以下です。**
30
+
31
+
32
+
33
+
34
+
35
+ ```ここに言語を入力
36
+
37
+
38
+
39
+ export const state = () => ({
40
+
41
+ record: null
42
+
43
+ })
44
+
45
+
46
+
47
+ export const mutations = {
48
+
49
+ setRecord (state, res) {
50
+
51
+ state.record = res
52
+
53
+ }
54
+
55
+ }
56
+
57
+
58
+
59
+ export const actions = {
60
+
61
+ async getRecord ({ commit }) {
62
+
63
+ const res = await this.$axios.$get('http://127.0.0.1:5000/api/record')
64
+
65
+ commit('setRecord', res)
66
+
67
+ }
68
+
69
+ }
70
+
71
+ ```
72
+
73
+
74
+
75
+ 　---
76
+
77
+ **<2> 設定ファイルは以下で　動いているものと変わりないと思います。**
78
+
79
+ ```
80
+
81
+ // nuxt.config.js
82
+
83
+
84
+
85
+ export default {
86
+
87
+ mode: 'universal',
88
+
89
+ ～省略～
90
+
91
+ ** Nuxt.js modules
92
+
93
+ */
94
+
95
+ modules: [
96
+
97
+ // Doc: https://axios.nuxtjs.org/usage
98
+
99
+ '@nuxtjs/axios',
100
+
101
+ ],
102
+
103
+ /*
104
+
105
+ ** Axios module configuration
106
+
107
+ ** See https://axios.nuxtjs.org/options
108
+
109
+ */
110
+
111
+ axios: {
112
+
113
+ },
114
+
115
+ 省略
116
+
117
+ }
118
+
119
+ ```
120
+
121
+ ---
122
+
123
+ **<3> (package.json)**
124
+
125
+ ```ここに言語を入力
126
+
127
+ "dependencies": {
128
+
129
+ "@nuxtjs/axios": "^5.3.6",
130
+
131
+ },
132
+
133
+ ```
134
+
135
+ ---
136
+
137
+ **<4> 念のため、pages配下に以下のコードを置いてAPIが出力できているか確認してみましたが、問題なく取得できます。**
138
+
139
+ （pages/record.vue)
140
+
141
+ ```ここに言語を入力
142
+
143
+ <template>
144
+
145
+ <section>
146
+
147
+ <p>{{ record }}</p>
148
+
149
+ </section>
150
+
151
+ </template>
152
+
153
+
154
+
155
+ <script>
156
+
157
+ export default {
158
+
159
+ async asyncData ({ $axios, error }) {
160
+
161
+ try {
162
+
163
+ const response = await $axios.$get('http://127.0.0.1:5000/api/record')
164
+
165
+ return { record: response }
166
+
167
+ } catch (err) {
168
+
169
+ error({
170
+
171
+ statusCode: err.resoponse.status,
172
+
173
+ message: err.response.data.message
174
+
175
+ })
176
+
177
+ }
178
+
179
+ }
180
+
181
+ }
182
+
183
+ </script>
184
+
185
+ ```
186
+
187
+ ---
188
+
189
+ **<5> breakpoint 設定**
16
190
 
17
191
  ```ここに言語を入力
18
192
 
@@ -32,11 +206,11 @@
32
206
 
33
207
 
34
208
 
209
+ ---
210
+
211
+
212
+
35
- - 再度プロジェクトを作成し直しましたが状況は同じです。
213
+ **<6> プロジェクトの作成方法**
36
-
37
-
38
-
39
-
40
214
 
41
215
  - `$ yarn create nuxt-app`　で作成しています。
42
216
 
@@ -87,159 +261,3 @@
87
261
 
88
262
 
89
263
  ---
90
-
91
- 0. ** store/index.js は以下です。**
92
-
93
-
94
-
95
-
96
-
97
- ```ここに言語を入力
98
-
99
-
100
-
101
- export const state = () => ({
102
-
103
- record: null
104
-
105
- })
106
-
107
-
108
-
109
- export const mutations = {
110
-
111
- setRecord (state, res) {
112
-
113
- state.record = res
114
-
115
- }
116
-
117
- }
118
-
119
-
120
-
121
- export const actions = {
122
-
123
- async getRecord ({ commit }) {
124
-
125
- const res = await this.$axios.$get('http://127.0.0.1:5000/api/record')
126
-
127
- commit('setRecord', res)
128
-
129
- }
130
-
131
- }
132
-
133
- ```
134
-
135
-
136
-
137
- 　---
138
-
139
- **2. 設定ファイルは以下で　動いているものと変わりないと思います。**
140
-
141
- ```
142
-
143
- // nuxt.config.js
144
-
145
-
146
-
147
- export default {
148
-
149
- mode: 'universal',
150
-
151
- ～省略～
152
-
153
- ** Nuxt.js modules
154
-
155
- */
156
-
157
- modules: [
158
-
159
- // Doc: https://axios.nuxtjs.org/usage
160
-
161
- '@nuxtjs/axios',
162
-
163
- ],
164
-
165
- /*
166
-
167
- ** Axios module configuration
168
-
169
- ** See https://axios.nuxtjs.org/options
170
-
171
- */
172
-
173
- axios: {
174
-
175
- },
176
-
177
- 省略
178
-
179
- }
180
-
181
- ```
182
-
183
- (package.json)
184
-
185
- ```ここに言語を入力
186
-
187
- "dependencies": {
188
-
189
- "@nuxtjs/axios": "^5.3.6",
190
-
191
- },
192
-
193
- ```
194
-
195
- ---
196
-
197
- **3.念のため、pages配下に以下のコードを置いてAPIが出力できているか確認してみましたが、問題なく取得できます。**
198
-
199
- （pages/record.vue)
200
-
201
- ```ここに言語を入力
202
-
203
- <template>
204
-
205
- <section>
206
-
207
- <p>{{ record }}</p>
208
-
209
- </section>
210
-
211
- </template>
212
-
213
-
214
-
215
- <script>
216
-
217
- export default {
218
-
219
- async asyncData ({ $axios, error }) {
220
-
221
- try {
222
-
223
- const response = await $axios.$get('http://127.0.0.1:5000/api/record')
224
-
225
- return { record: response }
226
-
227
- } catch (err) {
228
-
229
- error({
230
-
231
- statusCode: err.resoponse.status,
232
-
233
- message: err.response.data.message
234
-
235
- })
236
-
237
- }
238
-
239
- }
240
-
241
- }
242
-
243
- </script>
244
-
245
- ```