回答編集履歴
5
追記
test
CHANGED
|
@@ -161,3 +161,21 @@
|
|
|
161
161
|
「あるデータは、1箇所で管理すべき」(Single source of truth)(意訳)というプログラミングにおける原則があります。
|
|
162
162
|
|
|
163
163
|
そうしたら、`this.payload.id = null`をどう呼び出せばいいかも考えなくて良いのでは？
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
## 追記(2018/11/13)
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
> ただ、身も蓋も無いのですが、今回の場合コンポーネントのデータ`payload`はVuexに管理させた方がいいかもしれません。見たところ「ユーザーID」であり、Vuexで管理しているものと同じ値なので。
|
|
172
|
+
|
|
173
|
+
> 「あるデータは、1箇所で管理すべき」(Single source of truth)(意訳)というプログラミングにおける原則があります。
|
|
174
|
+
|
|
175
|
+
> そうしたら、`this.payload.id = null`をどう呼び出せばいいかも考えなくて良いのでは？
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
最終的な実装がわからない上での発言であり、蛇足です。
|
|
180
|
+
|
|
181
|
+
スルーしてください。
|
4
追記
test
CHANGED
|
@@ -74,9 +74,7 @@
|
|
|
74
74
|
|
|
75
75
|
`mapActions`は、アクションするだけのメソッドを、アクションと同名のメソッドとして展開してくれる(アクションするだけのメソッドを自分で繰り返し書かなくて良い)ものです。
|
|
76
76
|
|
|
77
|
-
`this.register(this.payload)`や`this.payload.id = null`などは、別のメソッドとしてまとめて、`mounted`など、[Vueコンポーネントのライフサイクル](https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0)の適切なタイミングで呼び出しましょう。
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
`this.register(this.payload)`や`this.payload.id = null`などは、別のメソッドとしてまとめて、~~`mounted`など、[Vueコンポーネントのライフサイクル](https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0)の~~適切なタイミングで呼び出しましょう。
|
|
80
78
|
|
|
81
79
|
## 補足
|
|
82
80
|
|
|
@@ -87,3 +85,79 @@
|
|
|
87
85
|
[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors)などを参考に、まずは「どんなエラーがでているのか」だけでも確認されるといいと思います。
|
|
88
86
|
|
|
89
87
|
または、ライブラリなどのエラーであれば、エラーメッセージで検索するとヒットすると思います。
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
## 追記(2018/11/13)
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
テストしてませんが、最終的なコードはおおむね以下のようになると思います。
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
メソッド名の`registerAndClearPayload`は内容から判断して適当に命名しています。
|
|
100
|
+
|
|
101
|
+
いずれにせよ、今回問題だったのは、オブジェクトの書き方が違っていたことです。
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
```JavaScript
|
|
106
|
+
|
|
107
|
+
<script>
|
|
108
|
+
|
|
109
|
+
import { mapGetters,mapActions } from "vuex";
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
export default {
|
|
114
|
+
|
|
115
|
+
asyncData() {
|
|
116
|
+
|
|
117
|
+
return {
|
|
118
|
+
|
|
119
|
+
msg: "新しくユーザを追加することができます",
|
|
120
|
+
|
|
121
|
+
payload: { id: null }
|
|
122
|
+
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
},
|
|
126
|
+
|
|
127
|
+
methods: {
|
|
128
|
+
|
|
129
|
+
...mapActions('users',['register']),
|
|
130
|
+
|
|
131
|
+
registerAndClearPayload: function() {
|
|
132
|
+
|
|
133
|
+
// mapActionsにより、this.register()メソッドとして、
|
|
134
|
+
|
|
135
|
+
// this.$store.dispatch('users/register', /* 引数 */) を実行するメソッドが登録されている
|
|
136
|
+
|
|
137
|
+
this.register(...this.payload)
|
|
138
|
+
|
|
139
|
+
this.payload.id = null
|
|
140
|
+
|
|
141
|
+
},
|
|
142
|
+
|
|
143
|
+
},
|
|
144
|
+
|
|
145
|
+
computed: {
|
|
146
|
+
|
|
147
|
+
...mapGetters("users", ["users"])
|
|
148
|
+
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
</script>
|
|
154
|
+
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
ただ、身も蓋も無いのですが、今回の場合コンポーネントのデータ`payload`はVuexに管理させた方がいいかもしれません。見たところ「ユーザーID」であり、Vuexで管理しているものと同じ値なので。
|
|
160
|
+
|
|
161
|
+
「あるデータは、1箇所で管理すべき」(Single source of truth)(意訳)というプログラミングにおける原則があります。
|
|
162
|
+
|
|
163
|
+
そうしたら、`this.payload.id = null`をどう呼び出せばいいかも考えなくて良いのでは？
|
3
内容編集
test
CHANGED
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
|
|
73
73
|
|
|
74
74
|
|
|
75
|
-
`mapActions`は、アクションを同名のメソッドとして展開してくれる(
|
|
75
|
+
`mapActions`は、アクションするだけのメソッドを、アクションと同名のメソッドとして展開してくれる(アクションするだけのメソッドを自分で繰り返し書かなくて良い)ものです。
|
|
76
76
|
|
|
77
77
|
`this.register(this.payload)`や`this.payload.id = null`などは、別のメソッドとしてまとめて、`mounted`など、[Vueコンポーネントのライフサイクル](https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0)の適切なタイミングで呼び出しましょう。
|
|
78
78
|
|
2
ないようへんしゅう
test
CHANGED
|
File without changes
|
1
誤植修正
test
CHANGED
|
@@ -46,9 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
```JavaScript
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
{ key1: value1, key2: value2 }
|
|
50
|
-
|
|
51
|
-
|
|
52
50
|
|
|
53
51
|
```
|
|
54
52
|
|