質問編集履歴

4

文章の追加

2021/04/29 00:12

投稿

nutti
nutti

スコア7

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  よろしくお願いいたします。
6
6
 
7
+ 文章が下手なので、先にソースを見ていただけた方がわかりやすいかもしれません。。。
8
+
7
9
 
8
10
 
9
11
  Vueのコンポーネントで、親から呼ばれた子のコンポーネント内で設定値をvuexへ保存したいのですが
@@ -16,7 +18,7 @@
16
18
 
17
19
  1. 親のコンポーネントで今回呼び出したい共通部品のコンポーネントを呼び出します。
18
20
 
19
- 2. 呼び出す際に、porpsなどでvuexの保存先情報を子コンポーネントへ渡します。
21
+ 2. 呼び出す際に、porpsなどでvuexの保存先(どのモジュールに保存するか)情報を子コンポーネントへ渡します。
20
22
 
21
23
  3. もらった情報を`...mapGetter`や`...mapActions`の第一引数に入れてあげて保存先を選択する
22
24
 
@@ -120,7 +122,7 @@
120
122
 
121
123
  ...mapGetters(this.storeName, [
122
124
 
123
- 'getItem',
125
+ 'getItem', // storeA~Cの中にそれぞれある共通getter
124
126
 
125
127
  ]),
126
128
 

3

文章の変更

2021/04/29 00:12

投稿

nutti
nutti

スコア7

test CHANGED
@@ -1 +1 @@
1
- Vueのコンポーネントで、Vuexのストアの情報親から子コンポーネントへ渡したい
1
+ vuexmapGettersやmapActionsで、設定値に変数使用したい
test CHANGED
@@ -6,25 +6,249 @@
6
6
 
7
7
 
8
8
 
9
- Vueのコンポーネントで、親から呼ばれた子のコンポーネント内で設定値をstoreへ保存したいのですが
9
+ Vueのコンポーネントで、親から呼ばれた子のコンポーネント内で設定値をvuexへ保存したいのですが
10
-
10
+
11
- その際に、親からの情報を受け取り(props値など)storeの保存先を変更したいです
11
+ その際に、親からのvuexの情報を受け取り、そ情報を元に保存する先を変更したいと考えました
12
12
 
13
13
  やりたい構造が下記の通りです。
14
14
 
15
15
 
16
16
 
17
- 1. 親のコンポーネントで共通のコンポーネントを呼び出します。
17
+ 1. 親のコンポーネントで今回呼び出したい共通部品のコンポーネントを呼び出します。
18
-
18
+
19
- 2. 呼び出す際に、porpsなどで保存先情報を子コンポーネントへ渡したい
19
+ 2. 呼び出す際に、porpsなどでvuexの保存先情報を子コンポーネントへ渡します
20
+
20
-
21
+ 3. もらった情報を`...mapGetter`や`...mapActions`の第一引数に入れてあげて保存先を選択する
22
+
23
+
24
+
21
- 3. 子のコンポーネン内では、ボタンなどが実装されており、その状態結果を親からもらった情報を元に、保存先を選択したいです。
25
+ 子のコンポーネン内(Chidlコンポーネント)では、ボタン(Buttonコンポーネント)などが実装されており、その状態結果を親からもらった保存先情報を元にvuexのモジュール先を選択して保存します。
26
+
27
+
28
+
29
+ ### 該当のソースコード
30
+
31
+ 親コンポーネント
32
+
33
+ ```vue
34
+
35
+ <template>
36
+
37
+ <div>
38
+
39
+ <Child :storeName="'storeA'" :id="'AA'" :text="'ストア1'" />
40
+
41
+ <Child :storeName="'storeB'" :id="'BB'" :text="'ストア2'" />
42
+
43
+ <Child :storeName="'storeC'" :id="'CC'" :text="'ストア3'" />
44
+
45
+ </div>
46
+
47
+ </template>
48
+
49
+ <script>
50
+
51
+ export default {
52
+
53
+ ...vueの諸々の処理 省略
54
+
55
+ }
56
+
57
+ </script>
58
+
59
+ ```
60
+
61
+
62
+
63
+ 子のコンポーネント Child.vue
64
+
65
+ ```vue
66
+
67
+ <template>
68
+
69
+ <div class="c-btnAndText">
70
+
71
+ <Button v-model="btnState" />
72
+
73
+ <span v-text="text"></span>
74
+
75
+ </div>
76
+
77
+ </template>
78
+
79
+ <script>
80
+
81
+ import { mapGetters, mapMutations, mapActions } from "vuex"
82
+
83
+ import Button from '@/components/button.vue'
84
+
85
+
86
+
87
+ export default {
88
+
89
+ name: 'Child',
90
+
91
+ data: () => {
92
+
93
+ return {
94
+
95
+ state: false,
96
+
97
+ }
98
+
99
+ },
100
+
101
+ components: {
102
+
103
+ Button,
104
+
105
+ },
106
+
107
+ props: {
108
+
109
+ storeName: String,
110
+
111
+ title: String,
112
+
113
+ id: String,
114
+
115
+ },
116
+
117
+ computed: {
118
+
119
+ // 下記がthis.storeNameではなく、直接 storeA と書くとうまく行くがpropsの値だとうまくいかない
120
+
121
+ ...mapGetters(this.storeName, [
122
+
123
+ 'getItem',
124
+
125
+ ]),
126
+
127
+ btnState: {
128
+
129
+ get() {
130
+
131
+ return this.state
132
+
133
+ },
134
+
135
+ set(value) {
136
+
137
+ this.state = value
138
+
139
+ }
140
+
141
+ },
142
+
143
+ },
144
+
145
+ watch: {
146
+
147
+ state: {
148
+
149
+ handler: function(nv, ov) {
150
+
151
+ this.setItem(this.id, this.state)
152
+
153
+ },
154
+
155
+ deep: true,
156
+
157
+ }
158
+
159
+ },
160
+
161
+ methods: {
162
+
163
+ ...mapActions(this.storeName, [
164
+
165
+ 'setItem',
166
+
167
+ ]),
168
+
169
+ },
170
+
171
+ }
172
+
173
+ </script>
174
+
175
+ ```
176
+
177
+
178
+
179
+ storeの構造
180
+
181
+ ```js
182
+
183
+ import Vue from 'vue'
184
+
185
+ import Vuex from 'vuex'
186
+
187
+ import storeA from './storeA'
188
+
189
+ import storeB from './storeB'
190
+
191
+ import storeC from './storeC'
192
+
193
+
194
+
195
+ Vue.use(Vuex)
196
+
197
+ export default new Vuex.Store({
198
+
199
+ state: {},
200
+
201
+ mutations: {
202
+
203
+ },
204
+
205
+ actions: {
206
+
207
+ },
208
+
209
+ modules: {
210
+
211
+ storeA: storeA,
212
+
213
+ storeB: storeB,
214
+
215
+ storeC: storeC,
216
+
217
+ },
218
+
219
+ })
220
+
221
+ ```
222
+
223
+ importした先のstoreA~Cの構造
224
+
225
+ ```
226
+
227
+ storeディレクトリ
228
+
229
+ |- index.js
230
+
231
+ |- storeA
232
+
233
+ --|- index.js
234
+
235
+ --|- actions.js
236
+
237
+ --|- getters.js
238
+
239
+ --|- mutations.js
240
+
241
+ ... storeB ~ Cも同様
242
+
243
+ ```
244
+
245
+
22
246
 
23
247
 
24
248
 
25
249
  ### 発生している問題・エラーメッセージ
26
250
 
27
- propsで受け取った値を使用したくても`undefined`のエラーがでてうまくいきません。
251
+ 色々試して、propsで値を渡し、受け取った値を`...mapGetters`の設定値に使用したくても`undefined`のエラーがでてうまくいきません。
28
252
 
29
253
  発生箇所は下記コードの、`this.storeName`の部分がうまくいきません。
30
254
 
@@ -32,222 +256,6 @@
32
256
 
33
257
 
34
258
 
35
- ### 該当のソースコード
36
-
37
- 親コンポーネント
38
-
39
- ```vue
40
-
41
- <template>
42
-
43
- <div>
44
-
45
- <Child :storeName="'storeA'" :id="'AA'" :text="'ストア1'" />
46
-
47
- <Child :storeName="'storeB'" :id="'BB'" :text="'ストア2'" />
48
-
49
- <Child :storeName="'storeC'" :id="'CC'" :text="'ストア3'" />
50
-
51
- </div>
52
-
53
- </template>
54
-
55
- <script>
56
-
57
- export default {
58
-
59
- ...vueの諸々の処理 省略
60
-
61
- }
62
-
63
- </script>
64
-
65
- ```
66
-
67
-
68
-
69
- 子のコンポーネント Child.vue
70
-
71
- ```vue
72
-
73
- <template>
74
-
75
- <div class="c-btnAndText">
76
-
77
- <Button v-model="btnState" />
78
-
79
- <span v-text="text"></span>
80
-
81
- </div>
82
-
83
- </template>
84
-
85
- <script>
86
-
87
- import { mapGetters, mapMutations, mapActions } from "vuex"
88
-
89
- import Button from '@/components/button.vue'
90
-
91
-
92
-
93
- export default {
94
-
95
- name: 'Child',
96
-
97
- data: () => {
98
-
99
- return {
100
-
101
- state: false,
102
-
103
- }
104
-
105
- },
106
-
107
- components: {
108
-
109
- Button,
110
-
111
- },
112
-
113
- props: {
114
-
115
- storeName: String,
116
-
117
- title: String,
118
-
119
- id: String,
120
-
121
- },
122
-
123
- computed: {
124
-
125
- // 下記がthis.storeNameではなく、直接 storeA と書くとうまく行くがpropsの値だとうまくいかない
126
-
127
- ...mapGetters(this.storeName, [
128
-
129
- 'getItem',
130
-
131
- ]),
132
-
133
- btnState: {
134
-
135
- get() {
136
-
137
- return this.state
138
-
139
- },
140
-
141
- set(value) {
142
-
143
- this.state = value
144
-
145
- }
146
-
147
- },
148
-
149
- },
150
-
151
- watch: {
152
-
153
- state: {
154
-
155
- handler: function(nv, ov) {
156
-
157
- this.setItem(this.id, this.state)
158
-
159
- },
160
-
161
- deep: true,
162
-
163
- }
164
-
165
- },
166
-
167
- methods: {
168
-
169
- ...mapActions(this.storeName, [
170
-
171
- 'setItem',
172
-
173
- ]),
174
-
175
- },
176
-
177
- }
178
-
179
- </script>
180
-
181
- ```
182
-
183
-
184
-
185
- storeの構造
186
-
187
- ```js
188
-
189
- import Vue from 'vue'
190
-
191
- import Vuex from 'vuex'
192
-
193
- import storeA from './storeA'
194
-
195
- import storeB from './storeB'
196
-
197
- import storeC from './storeC'
198
-
199
-
200
-
201
- Vue.use(Vuex)
202
-
203
- export default new Vuex.Store({
204
-
205
- state: {},
206
-
207
- mutations: {
208
-
209
- },
210
-
211
- actions: {
212
-
213
- },
214
-
215
- modules: {
216
-
217
- storeA: storeA,
218
-
219
- storeB: storeB,
220
-
221
- storeC: storeC,
222
-
223
- },
224
-
225
- })
226
-
227
- ```
228
-
229
- importした先のstoreA~Cの構造
230
-
231
- ```
232
-
233
- storeディレクトリ
234
-
235
- |- index.js
236
-
237
- |- storeA
238
-
239
- --|- index.js
240
-
241
- --|- actions.js
242
-
243
- --|- getters.js
244
-
245
- --|- mutations.js
246
-
247
- ... storeB ~ Cも同様
248
-
249
- ```
250
-
251
259
 
252
260
 
253
261
  # やってみたこと
@@ -264,9 +272,9 @@
264
272
 
265
273
  # 聞きたいこと
266
274
 
267
- 1. そもそもこのように保存先を分けてあげることができるのか -> その場合、全部のパターンのコンポーネントをそれぞれ作る必要があるのでしょうか?
275
+ 1. そもそもこのように`...mapGetters`や`...mapActions`のストアのmoduleを選択する引数へ、変数を設定し、保存先を分けてあげることができるのか -> できない場合、全部のパターンのコンポーネントをそれぞれ作る必要があるのでしょうか?
268
-
276
+
269
- 2. 現状のコードの方向性はあっているのか、間違っているのか。
277
+ 2. 現状のコードの方向性はあっているのか、間違っているのか。(第一引数へ変数をいれて振り分ける)
270
278
 
271
279
  3. 可能である場合、どう言った方法があるのか
272
280
 

2

誤字修正

2021/04/29 00:09

投稿

nutti
nutti

スコア7

test CHANGED
File without changes
test CHANGED
@@ -230,13 +230,13 @@
230
230
 
231
231
  ```
232
232
 
233
- /store
233
+ storeディレクトリ
234
234
 
235
235
  |- index.js
236
236
 
237
237
  |- storeA
238
238
 
239
- |- index.js
239
+ --|- index.js
240
240
 
241
241
  --|- actions.js
242
242
 

1

誤字脱字の修正とタイトル、タグの修正

2021/04/28 12:47

投稿

nutti
nutti

スコア7

test CHANGED
@@ -1 +1 @@
1
- Vue.jsのコンポーネントで、propsの値でstoreの切り替える方法
1
+ Vueのコンポーネントで、Vuexストアの情報親から子コンポーネントへ渡したい
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  Vueのコンポーネントで、親から呼ばれた子のコンポーネント内で設定値をstoreへ保存したいのですが
10
10
 
11
- その際に、propsの値によってstoreの保存先を変更したいです。
11
+ その際に、親からの情報を受け取り(propsの値など)storeの保存先を変更したいです。
12
12
 
13
13
  やりたい構造が下記の通りです。
14
14
 
@@ -16,9 +16,9 @@
16
16
 
17
17
  1. 親のコンポーネントで共通のコンポーネントを呼び出します。
18
18
 
19
- 2. 呼び出す際に、porpsで保存先を選びたいです
19
+ 2. 呼び出す際に、porpsなどで保存先情報子コンポーネントへ渡したい。
20
-
20
+
21
- 3. 子のコンポーネン内では、ボタンなどが実装されており、その結果を親から指定されたに保存先したいです。
21
+ 3. 子のコンポーネン内では、ボタンなどが実装されており、その状態結果を親からもらっ情報を元保存先を選択したいです。
22
22
 
23
23
 
24
24
 
@@ -26,9 +26,9 @@
26
26
 
27
27
  propsで受け取った値を使用したくても`undefined`のエラーがでてうまくいきません。
28
28
 
29
- 下記コードの、`this.storeName`の部分がうまくいきません。
29
+ 発生箇所は下記コードの、`this.storeName`の部分がうまくいきません。
30
-
30
+
31
- 変数ではなく、`storeA`のように直接書くとうまくいきます。
31
+ 変数ではなく、`'storeA'`のように直接書くとうまくいきます。
32
32
 
33
33
 
34
34
 
@@ -56,7 +56,7 @@
56
56
 
57
57
  export default {
58
58
 
59
- ...省略
59
+ ...vueの諸々の処理 省略
60
60
 
61
61
  }
62
62
 
@@ -254,17 +254,17 @@
254
254
 
255
255
  上記のソースのような感じで、
256
256
 
257
- `...mapGetters`や、`...mapActions`の第一引数で`prps`の値を入れてみたのですがうまく動きませんでした。
257
+ `...mapGetters`や、`...mapActions`の第一引数で`props`の値を入れてみたのですがうまく動きませんでした。
258
-
258
+
259
- ボタンと文章という使いまわせるコンポーネントがあり、その設定情報を指定したstoreに保存したいのですが
259
+ 今回のような、ボタンと文章という使いまわせるコンポーネントがあり、その設定情報を指定したstoreに保存したいのですが
260
-
260
+
261
- うまくいかず、色々試行錯誤してみたのですが、調べても結果が出なく質問させていただきました。
261
+ うまくいかず、色々調べて`computed`などで値を指定するなど試行錯誤してみたのですが、結果が出なく質問させていただきました。
262
262
 
263
263
 
264
264
 
265
265
  # 聞きたいこと
266
266
 
267
- 1. そもそもこのように保存先を分けてあげることができるのか
267
+ 1. そもそもこのように保存先を分けてあげることができるのか -> その場合、全部のパターンのコンポーネントをそれぞれ作る必要があるのでしょうか?
268
268
 
269
269
  2. 現状のコードの方向性はあっているのか、間違っているのか。
270
270