teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問【Vuex】gettersで取得したデータをコンポーネント側のdataに追加したい

編集履歴

質問編集履歴

3

修正

2021/08/01 08:47

投稿

matsuo_basho
matsuo_basho

スコア88

test CHANGED
File without changes
test CHANGED
@@ -24,6 +24,12 @@
24
24
 
25
25
 
26
26
 
27
+ ※またstackoverflowでも[同様の質問](https://ja.stackoverflow.com/questions/80513/vue-js-vue-cli-vuex-vuex-getters%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e5%81%b4%e3%81%aedata%e3%81%ab%e8%bf%bd%e5%8a%a0%e3%81%97%e3%81%9f%e3%81%84)をしています。
28
+
29
+ どちらかで解決ができればその旨を追記致します。
30
+
31
+
32
+
27
33
 
28
34
 
29
35
  ### ソースコード

2

説明文修正

2021/08/01 08:47

投稿

matsuo_basho
matsuo_basho

スコア88

test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,14 @@
12
12
 
13
13
 
14
14
 
15
+ dataは https://jsonplaceholder.typicode.com から取得したデータになるのですが、
16
+
17
+ あらかじめstoreのdataに手動で値を入れておけば問題なく表示ができるのですが、
18
+
19
+ apiを利用したデータは表示することができません。
20
+
21
+
22
+
15
23
  どなたかどうすれば良いかわかる方がいらっしゃればご教授いただけますと幸いです。
16
24
 
17
25
 
@@ -20,212 +28,214 @@
20
28
 
21
29
  ### ソースコード
22
30
 
31
+ ```javascript
32
+
33
+
34
+
35
+ // store/index.js
36
+
37
+
38
+
39
+ import { createStore } from 'vuex'
40
+
41
+ import axios from 'axios'
42
+
43
+
44
+
45
+ export default createStore({
46
+
47
+
48
+
49
+ state : {
50
+
51
+
52
+
53
+ isLoading : true,
54
+
55
+ data : ""
56
+
57
+
58
+
59
+ },
60
+
61
+
62
+
63
+ getters : {
64
+
65
+
66
+
67
+ isLoading : (state) => state.isLoading,
68
+
69
+ data : (state) => state.data
70
+
71
+
72
+
73
+ },
74
+
75
+
76
+
77
+ mutations : {
78
+
79
+
80
+
81
+ setData(state, { data }){
82
+
83
+
84
+
85
+ state.data = data
86
+
87
+
88
+
89
+ }
90
+
91
+
92
+
93
+ },
94
+
95
+
96
+
97
+ actions : {
98
+
99
+
100
+
101
+ async fetchData({ commit, state }){
102
+
103
+
104
+
105
+ const url = `https://jsonplaceholder.typicode.com/users/1`;
106
+
107
+ const rowData = await axios.get(url)
108
+
109
+ const data = rowData.data
110
+
111
+
112
+
113
+ state.isLoading = false
114
+
115
+
116
+
117
+ commit('setData', { data })
118
+
119
+
120
+
121
+ }
122
+
123
+ }
124
+
125
+
126
+
127
+ })
128
+
129
+
130
+
131
+
132
+
23
133
  ```
24
134
 
25
- // store/index.js
26
-
27
-
28
-
29
- import { createStore } from 'vuex'
30
-
31
- import axios from 'axios'
32
-
33
-
34
-
35
- export default createStore({
36
-
37
-
38
-
39
- state : {
40
-
41
-
42
-
43
- isLoading : true,
44
-
45
- data : ""
46
-
47
-
48
-
49
- },
50
-
51
-
52
-
53
- getters : {
54
-
55
-
56
-
57
- isLoading : (state) => state.isLoading,
58
-
59
- data : (state) => state.data
60
-
61
-
62
-
63
- },
64
-
65
-
66
-
67
- mutations : {
68
-
69
-
70
-
71
- setData(state, { data }){
72
-
73
-
74
-
75
- state.data = data
76
-
77
-
78
-
79
- }
80
-
81
-
82
-
83
- },
84
-
85
-
86
-
87
- actions : {
88
-
89
-
90
-
91
- async fetchData({ commit, state }){
92
-
93
-
94
-
95
- const url = `https://jsonplaceholder.typicode.com/users/1`;
96
-
97
- const rowData = await axios.get(url)
98
-
99
- const data = rowData.data
100
-
101
-
102
-
103
- state.isLoading = false
104
-
105
-
106
-
107
- commit('setData', { data })
108
-
109
-
110
-
111
- }
112
-
113
- }
114
-
115
-
116
-
117
- })
118
-
119
-
120
-
121
-
122
-
123
135
  ```
124
136
 
137
+
138
+
139
+ // App.vue
140
+
141
+
142
+
143
+ <template>
144
+
145
+ <div>
146
+
147
+
148
+
149
+ <template v-if="isLoading">
150
+
151
+ <p>Loading...</p>
152
+
153
+ </template>
154
+
155
+
156
+
157
+ <template v-else>
158
+
159
+ {{ data }}
160
+
161
+ </template>
162
+
163
+
164
+
165
+
166
+
167
+ </div>
168
+
169
+ </template>
170
+
171
+
172
+
173
+ <script>
174
+
175
+ import { mapGetters, mapActions } from "vuex";
176
+
177
+
178
+
179
+ export default {
180
+
181
+
182
+
183
+ data(){
184
+
185
+ return {
186
+
187
+
188
+
189
+ data : this.$store.getters.data
190
+
191
+
192
+
193
+ }
194
+
195
+ },
196
+
197
+
198
+
199
+ created(){
200
+
201
+
202
+
203
+ this.fetchData();
204
+
205
+
206
+
207
+ },
208
+
209
+
210
+
211
+ computed : {
212
+
213
+
214
+
215
+ ...mapGetters([ 'isLoading' ])
216
+
217
+
218
+
219
+ },
220
+
221
+
222
+
223
+ methods : {
224
+
225
+
226
+
227
+ ...mapActions([ 'fetchData' ])
228
+
229
+
230
+
231
+ }
232
+
233
+
234
+
235
+ }
236
+
237
+ </script>
238
+
239
+
240
+
125
241
  ```
126
-
127
-
128
-
129
- // App.vue
130
-
131
-
132
-
133
- <template>
134
-
135
- <div>
136
-
137
-
138
-
139
- <template v-if="isLoading">
140
-
141
- <p>Loading...</p>
142
-
143
- </template>
144
-
145
-
146
-
147
- <template v-else>
148
-
149
- {{ data }}
150
-
151
- </template>
152
-
153
-
154
-
155
-
156
-
157
- </div>
158
-
159
- </template>
160
-
161
-
162
-
163
- <script>
164
-
165
- import { mapGetters, mapActions } from "vuex";
166
-
167
-
168
-
169
- export default {
170
-
171
-
172
-
173
- data(){
174
-
175
- return {
176
-
177
-
178
-
179
- data : this.$store.getters.data
180
-
181
-
182
-
183
- }
184
-
185
- },
186
-
187
-
188
-
189
- created(){
190
-
191
-
192
-
193
- this.fetchData();
194
-
195
-
196
-
197
- },
198
-
199
-
200
-
201
- computed : {
202
-
203
-
204
-
205
- ...mapGetters([ 'isLoading' ])
206
-
207
-
208
-
209
- },
210
-
211
-
212
-
213
- methods : {
214
-
215
-
216
-
217
- ...mapActions([ 'fetchData' ])
218
-
219
-
220
-
221
- }
222
-
223
-
224
-
225
- }
226
-
227
- </script>
228
-
229
-
230
-
231
- ```

1

ソースコード修正

2021/08/01 05:49

投稿

matsuo_basho
matsuo_basho

スコア88

test CHANGED
File without changes
test CHANGED
@@ -22,20 +22,150 @@
22
22
 
23
23
  ```
24
24
 
25
+ // store/index.js
26
+
27
+
28
+
29
+ import { createStore } from 'vuex'
30
+
31
+ import axios from 'axios'
32
+
33
+
34
+
35
+ export default createStore({
36
+
37
+
38
+
39
+ state : {
40
+
41
+
42
+
43
+ isLoading : true,
44
+
45
+ data : ""
46
+
47
+
48
+
49
+ },
50
+
51
+
52
+
53
+ getters : {
54
+
55
+
56
+
57
+ isLoading : (state) => state.isLoading,
58
+
59
+ data : (state) => state.data
60
+
61
+
62
+
63
+ },
64
+
65
+
66
+
67
+ mutations : {
68
+
69
+
70
+
71
+ setData(state, { data }){
72
+
73
+
74
+
75
+ state.data = data
76
+
77
+
78
+
79
+ }
80
+
81
+
82
+
83
+ },
84
+
85
+
86
+
87
+ actions : {
88
+
89
+
90
+
91
+ async fetchData({ commit, state }){
92
+
93
+
94
+
95
+ const url = `https://jsonplaceholder.typicode.com/users/1`;
96
+
97
+ const rowData = await axios.get(url)
98
+
99
+ const data = rowData.data
100
+
101
+
102
+
103
+ state.isLoading = false
104
+
105
+
106
+
107
+ commit('setData', { data })
108
+
109
+
110
+
111
+ }
112
+
113
+ }
114
+
115
+
116
+
117
+ })
118
+
119
+
120
+
121
+
122
+
123
+ ```
124
+
125
+ ```
126
+
127
+
128
+
129
+ // App.vue
130
+
131
+
132
+
133
+ <template>
134
+
25
- <div>
135
+ <div>
136
+
137
+
138
+
26
-
139
+ <template v-if="isLoading">
140
+
27
-
141
+ <p>Loading...</p>
142
+
28
-
143
+ </template>
144
+
145
+
146
+
147
+ <template v-else>
148
+
29
- {{ hoge }}
149
+ {{ data }}
150
+
30
-
151
+ </template>
31
-
32
-
152
+
153
+
154
+
155
+
156
+
33
- </div>
157
+ </div>
158
+
159
+ </template>
34
160
 
35
161
 
36
162
 
37
163
  <script>
38
164
 
165
+ import { mapGetters, mapActions } from "vuex";
166
+
167
+
168
+
39
169
  export default {
40
170
 
41
171
 
@@ -46,12 +176,48 @@
46
176
 
47
177
 
48
178
 
49
- hoge : this.$store.getters.storeData,
179
+ data : this.$store.getters.data
50
180
 
51
181
 
52
182
 
53
183
  }
54
184
 
185
+ },
186
+
187
+
188
+
189
+ created(){
190
+
191
+
192
+
193
+ this.fetchData();
194
+
195
+
196
+
197
+ },
198
+
199
+
200
+
201
+ computed : {
202
+
203
+
204
+
205
+ ...mapGetters([ 'isLoading' ])
206
+
207
+
208
+
209
+ },
210
+
211
+
212
+
213
+ methods : {
214
+
215
+
216
+
217
+ ...mapActions([ 'fetchData' ])
218
+
219
+
220
+
55
221
  }
56
222
 
57
223
 
@@ -60,4 +226,6 @@
60
226
 
61
227
  </script>
62
228
 
229
+
230
+
63
- ```
231
+ ```