質問編集履歴
4
文章の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
Vue.js初心者です。不足事項などがありましたら追記いたしますのでお申し付けください。
|
|
3
3
|
よろしくお願いいたします。
|
|
4
|
+
文章が下手なので、先にソースを見ていただけた方がわかりやすいかもしれません。。。
|
|
4
5
|
|
|
5
6
|
Vueのコンポーネントで、親から呼ばれた子のコンポーネント内で設定値をvuexへ保存したいのですが
|
|
6
7
|
その際に、親からのvuexの情報を受け取り、その情報を元に保存する先を変更したいと考えました。
|
|
7
8
|
やりたい構造が下記の通りです。
|
|
8
9
|
|
|
9
10
|
1. 親のコンポーネントで今回呼び出したい共通部品のコンポーネントを呼び出します。
|
|
10
|
-
2. 呼び出す際に、porpsなどでvuexの保存先情報を子コンポーネントへ渡します。
|
|
11
|
+
2. 呼び出す際に、porpsなどでvuexの保存先（どのモジュールに保存するか）情報を子コンポーネントへ渡します。
|
|
11
12
|
3. もらった情報を`...mapGetter`や`...mapActions`の第一引数に入れてあげて保存先を選択する
|
|
12
13
|
|
|
13
14
|
子のコンポーネン内(Chidlコンポーネント)では、ボタン(Buttonコンポーネント)などが実装されており、その状態結果を親からもらった保存先情報を元にvuexのモジュール先を選択して保存します。
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
computed: {
|
|
60
61
|
// 下記がthis.storeNameではなく、直接 storeA と書くとうまく行くがpropsの値だとうまくいかない
|
|
61
62
|
...mapGetters(this.storeName, [
|
|
62
|
-
'getItem',
|
|
63
|
+
'getItem', // storeA~Cの中にそれぞれある共通getter
|
|
63
64
|
]),
|
|
64
65
|
btnState: {
|
|
65
66
|
get() {
|
3
文章の変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
vuexのmapGettersやmapActionsで、設定値に変数を使用したい
|
body
CHANGED
|
@@ -2,18 +2,15 @@
|
|
|
2
2
|
Vue.js初心者です。不足事項などがありましたら追記いたしますのでお申し付けください。
|
|
3
3
|
よろしくお願いいたします。
|
|
4
4
|
|
|
5
|
-
Vueのコンポーネントで、親から呼ばれた子のコンポーネント内で設定値を
|
|
5
|
+
Vueのコンポーネントで、親から呼ばれた子のコンポーネント内で設定値をvuexへ保存したいのですが
|
|
6
|
-
その際に、親からの情報を受け取り
|
|
6
|
+
その際に、親からのvuexの情報を受け取り、その情報を元に保存する先を変更したいと考えました。
|
|
7
7
|
やりたい構造が下記の通りです。
|
|
8
8
|
|
|
9
|
-
1. 親のコンポーネントで共通のコンポーネントを呼び出します。
|
|
9
|
+
1. 親のコンポーネントで今回呼び出したい共通部品のコンポーネントを呼び出します。
|
|
10
|
-
2. 呼び出す際に、porpsなどで保存先情報を子コンポーネントへ渡し
|
|
10
|
+
2. 呼び出す際に、porpsなどでvuexの保存先情報を子コンポーネントへ渡します。
|
|
11
|
-
3.
|
|
11
|
+
3. もらった情報を`...mapGetter`や`...mapActions`の第一引数に入れてあげて保存先を選択する
|
|
12
12
|
|
|
13
|
-
### 発生している問題・エラーメッセージ
|
|
14
|
-
propsで受け取った値を使用したくても`undefined`のエラーがでてうまくいきません。
|
|
15
|
-
発生箇所は下記コードの、`this.storeName`の部分がうまくいきません。
|
|
16
|
-
|
|
13
|
+
子のコンポーネン内(Chidlコンポーネント)では、ボタン(Buttonコンポーネント)などが実装されており、その状態結果を親からもらった保存先情報を元にvuexのモジュール先を選択して保存します。
|
|
17
14
|
|
|
18
15
|
### 該当のソースコード
|
|
19
16
|
親コンポーネント
|
|
@@ -124,6 +121,13 @@
|
|
|
124
121
|
... storeB ~ Cも同様
|
|
125
122
|
```
|
|
126
123
|
|
|
124
|
+
|
|
125
|
+
### 発生している問題・エラーメッセージ
|
|
126
|
+
色々試して、propsで値を渡し、受け取った値を`...mapGetters`の設定値に使用したくても`undefined`のエラーがでてうまくいきません。
|
|
127
|
+
発生箇所は下記コードの、`this.storeName`の部分がうまくいきません。
|
|
128
|
+
変数ではなく、`'storeA'`のように直接書くとうまくいきます。
|
|
129
|
+
|
|
130
|
+
|
|
127
131
|
# やってみたこと
|
|
128
132
|
上記のソースのような感じで、
|
|
129
133
|
`...mapGetters`や、`...mapActions`の第一引数で`props`の値を入れてみたのですがうまく動きませんでした。
|
|
@@ -131,8 +135,8 @@
|
|
|
131
135
|
うまくいかず、色々調べて`computed`などで値を指定するなど試行錯誤してみたのですが、結果が出なく質問させていただきました。
|
|
132
136
|
|
|
133
137
|
# 聞きたいこと
|
|
134
|
-
1. そもそもこのように保存先を分けてあげることができるのか ->
|
|
138
|
+
1. そもそもこのように`...mapGetters`や`...mapActions`のストアのmoduleを選択する引数へ、変数を設定し、保存先を分けてあげることができるのか -> できない場合は、全部のパターンのコンポーネントをそれぞれ作る必要があるのでしょうか？
|
|
135
|
-
2. 現状のコードの方向性はあっているのか、間違っているのか。
|
|
139
|
+
2. 現状のコードの方向性はあっているのか、間違っているのか。（第一引数へ変数をいれて振り分ける)
|
|
136
140
|
3. 可能である場合、どう言った方法があるのか
|
|
137
141
|
になります。
|
|
138
142
|
|
2
誤字修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -114,10 +114,10 @@
|
|
|
114
114
|
```
|
|
115
115
|
importした先のstoreA~Cの構造
|
|
116
116
|
```
|
|
117
|
-
|
|
117
|
+
storeディレクトリ
|
|
118
118
|
|- index.js
|
|
119
119
|
|- storeA
|
|
120
|
-
|- index.js
|
|
120
|
+
--|- index.js
|
|
121
121
|
--|- actions.js
|
|
122
122
|
--|- getters.js
|
|
123
123
|
--|- mutations.js
|
1
誤字脱字の修正とタイトル、タグの修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Vue
|
|
1
|
+
Vueのコンポーネントで、Vuexのストアの情報を親から子コンポーネントへ渡したい
|
body
CHANGED
|
@@ -3,17 +3,17 @@
|
|
|
3
3
|
よろしくお願いいたします。
|
|
4
4
|
|
|
5
5
|
Vueのコンポーネントで、親から呼ばれた子のコンポーネント内で設定値をstoreへ保存したいのですが
|
|
6
|
-
その際に、propsの値
|
|
6
|
+
その際に、親からの情報を受け取り(propsの値など)storeの保存先を変更したいです。
|
|
7
7
|
やりたい構造が下記の通りです。
|
|
8
8
|
|
|
9
9
|
1. 親のコンポーネントで共通のコンポーネントを呼び出します。
|
|
10
|
-
2. 呼び出す際に、porpsで保存先を
|
|
10
|
+
2. 呼び出す際に、porpsなどで保存先情報を子コンポーネントへ渡したい。
|
|
11
|
-
3. 子のコンポーネン内では、ボタンなどが実装されており、その結果を親から
|
|
11
|
+
3. 子のコンポーネン内では、ボタンなどが実装されており、その状態結果を親からもらった情報を元に、保存先を選択したいです。
|
|
12
12
|
|
|
13
13
|
### 発生している問題・エラーメッセージ
|
|
14
14
|
propsで受け取った値を使用したくても`undefined`のエラーがでてうまくいきません。
|
|
15
|
-
下記コードの、`this.storeName`の部分がうまくいきません。
|
|
15
|
+
発生箇所は下記コードの、`this.storeName`の部分がうまくいきません。
|
|
16
|
-
変数ではなく、`storeA`のように直接書くとうまくいきます。
|
|
16
|
+
変数ではなく、`'storeA'`のように直接書くとうまくいきます。
|
|
17
17
|
|
|
18
18
|
### 該当のソースコード
|
|
19
19
|
親コンポーネント
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</template>
|
|
28
28
|
<script>
|
|
29
29
|
export default {
|
|
30
|
-
...省略
|
|
30
|
+
...vueの諸々の処理 省略
|
|
31
31
|
}
|
|
32
32
|
</script>
|
|
33
33
|
```
|
|
@@ -126,12 +126,12 @@
|
|
|
126
126
|
|
|
127
127
|
# やってみたこと
|
|
128
128
|
上記のソースのような感じで、
|
|
129
|
-
`...mapGetters`や、`...mapActions`の第一引数で`
|
|
129
|
+
`...mapGetters`や、`...mapActions`の第一引数で`props`の値を入れてみたのですがうまく動きませんでした。
|
|
130
|
-
ボタンと文章という使いまわせるコンポーネントがあり、その設定情報を指定したstoreに保存したいのですが
|
|
130
|
+
今回のような、ボタンと文章という使いまわせるコンポーネントがあり、その設定情報を指定したstoreに保存したいのですが
|
|
131
|
-
うまくいかず、色々試行錯誤してみたのですが、
|
|
131
|
+
うまくいかず、色々調べて`computed`などで値を指定するなど試行錯誤してみたのですが、結果が出なく質問させていただきました。
|
|
132
132
|
|
|
133
133
|
# 聞きたいこと
|
|
134
|
-
1. そもそもこのように保存先を分けてあげることができるのか
|
|
134
|
+
1. そもそもこのように保存先を分けてあげることができるのか -> その場合、全部のパターンのコンポーネントをそれぞれ作る必要があるのでしょうか？
|
|
135
135
|
2. 現状のコードの方向性はあっているのか、間違っているのか。
|
|
136
136
|
3. 可能である場合、どう言った方法があるのか
|
|
137
137
|
になります。
|