回答編集履歴
5
追記
answer
CHANGED
|
@@ -79,4 +79,13 @@
|
|
|
79
79
|
|
|
80
80
|
ただ、身も蓋も無いのですが、今回の場合コンポーネントのデータ`payload`はVuexに管理させた方がいいかもしれません。見たところ「ユーザーID」であり、Vuexで管理しているものと同じ値なので。
|
|
81
81
|
「あるデータは、1箇所で管理すべき」(Single source of truth)(意訳)というプログラミングにおける原則があります。
|
|
82
|
-
そうしたら、`this.payload.id = null`をどう呼び出せばいいかも考えなくて良いのでは？
|
|
82
|
+
そうしたら、`this.payload.id = null`をどう呼び出せばいいかも考えなくて良いのでは？
|
|
83
|
+
|
|
84
|
+
## 追記(2018/11/13)
|
|
85
|
+
|
|
86
|
+
> ただ、身も蓋も無いのですが、今回の場合コンポーネントのデータ`payload`はVuexに管理させた方がいいかもしれません。見たところ「ユーザーID」であり、Vuexで管理しているものと同じ値なので。
|
|
87
|
+
> 「あるデータは、1箇所で管理すべき」(Single source of truth)(意訳)というプログラミングにおける原則があります。
|
|
88
|
+
> そうしたら、`this.payload.id = null`をどう呼び出せばいいかも考えなくて良いのでは？
|
|
89
|
+
|
|
90
|
+
最終的な実装がわからない上での発言であり、蛇足です。
|
|
91
|
+
スルーしてください。
|
4
追記
answer
CHANGED
|
@@ -36,10 +36,47 @@
|
|
|
36
36
|
オブジェクトの中で`...mapActions('users',['register'])`のあとに`this.register(this.payload)`が記述されていることが問題です(文字通り`expected ","`です)。
|
|
37
37
|
|
|
38
38
|
`mapActions`は、アクションするだけのメソッドを、アクションと同名のメソッドとして展開してくれる(アクションするだけのメソッドを自分で繰り返し書かなくて良い)ものです。
|
|
39
|
-
`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)の適切なタイミングで呼び出しましょう。
|
|
40
|
-
|
|
39
|
+
`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)の~~適切なタイミングで呼び出しましょう。
|
|
41
40
|
## 補足
|
|
42
41
|
|
|
43
42
|
プログラミング中にエラーが起きた時は、表示されたエラー内容を読解する習慣をつけると、今後自力で解決する力になります。
|
|
44
43
|
[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors)などを参考に、まずは「どんなエラーがでているのか」だけでも確認されるといいと思います。
|
|
45
|
-
または、ライブラリなどのエラーであれば、エラーメッセージで検索するとヒットすると思います。
|
|
44
|
+
または、ライブラリなどのエラーであれば、エラーメッセージで検索するとヒットすると思います。
|
|
45
|
+
|
|
46
|
+
## 追記(2018/11/13)
|
|
47
|
+
|
|
48
|
+
テストしてませんが、最終的なコードはおおむね以下のようになると思います。
|
|
49
|
+
|
|
50
|
+
メソッド名の`registerAndClearPayload`は内容から判断して適当に命名しています。
|
|
51
|
+
いずれにせよ、今回問題だったのは、オブジェクトの書き方が違っていたことです。
|
|
52
|
+
|
|
53
|
+
```JavaScript
|
|
54
|
+
<script>
|
|
55
|
+
import { mapGetters,mapActions } from "vuex";
|
|
56
|
+
|
|
57
|
+
export default {
|
|
58
|
+
asyncData() {
|
|
59
|
+
return {
|
|
60
|
+
msg: "新しくユーザを追加することができます",
|
|
61
|
+
payload: { id: null }
|
|
62
|
+
};
|
|
63
|
+
},
|
|
64
|
+
methods: {
|
|
65
|
+
...mapActions('users',['register']),
|
|
66
|
+
registerAndClearPayload: function() {
|
|
67
|
+
// mapActionsにより、this.register()メソッドとして、
|
|
68
|
+
// this.$store.dispatch('users/register', /* 引数 */) を実行するメソッドが登録されている
|
|
69
|
+
this.register(...this.payload)
|
|
70
|
+
this.payload.id = null
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
computed: {
|
|
74
|
+
...mapGetters("users", ["users"])
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
</script>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
ただ、身も蓋も無いのですが、今回の場合コンポーネントのデータ`payload`はVuexに管理させた方がいいかもしれません。見たところ「ユーザーID」であり、Vuexで管理しているものと同じ値なので。
|
|
81
|
+
「あるデータは、1箇所で管理すべき」(Single source of truth)(意訳)というプログラミングにおける原則があります。
|
|
82
|
+
そうしたら、`this.payload.id = null`をどう呼び出せばいいかも考えなくて良いのでは？
|
3
内容編集
answer
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
今回のケースでは、
|
|
36
36
|
オブジェクトの中で`...mapActions('users',['register'])`のあとに`this.register(this.payload)`が記述されていることが問題です(文字通り`expected ","`です)。
|
|
37
37
|
|
|
38
|
-
`mapActions`は、アクションを同名のメソッドとして展開してくれる(
|
|
38
|
+
`mapActions`は、アクションするだけのメソッドを、アクションと同名のメソッドとして展開してくれる(アクションするだけのメソッドを自分で繰り返し書かなくて良い)ものです。
|
|
39
39
|
`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)の適切なタイミングで呼び出しましょう。
|
|
40
40
|
|
|
41
41
|
## 補足
|
2
ないようへんしゅう
answer
CHANGED
|
File without changes
|
1
誤植修正
answer
CHANGED
|
@@ -22,8 +22,7 @@
|
|
|
22
22
|
オブジェクトの基本形は以下の通りで、`キー→値→(カンマ)`の繰り返しが期待されます。
|
|
23
23
|
|
|
24
24
|
```JavaScript
|
|
25
|
-
|
|
25
|
+
{ key1: value1, key2: value2 }
|
|
26
|
-
|
|
27
26
|
```
|
|
28
27
|
|
|
29
28
|
スプレッド構文はオブジェクトを別のオブジェクトに展開するものです。
|