`Record.vue`非同期処理の修正

postStudyTime()メソッドをaxiosで非同期処理をしている為、画面のリロードが不要になったその為、他のメソッドに影響があったので修正をする

経緯 created()は初期表示時（又はリロードする）しか呼ばれない => 画面のリロードが無いとDBと同期処理を行わない為、studies.totalの計算メソッドが不具合を起こしていた

postStudyTime(){
var calcTotalValue = parseFloat(this.userTotal.total) + parseFloat(this.study.time);
# `this.userTotal`は`created()プロパティ`内で取得する値なので、
# 非同期処理されると常に画面描画時のデータしか取得できない事に気づく
}

=> this.userTotalを取得する方法を非同期でも必ず最新の値を取得する必要がある

解消策 created()プロパティではthis.userTotalの値を取得せず、各メソッド内でthis.userTotalの値を取得する

this.userTotalの値を使用しているメソッド

postStudyTime()メソッド
calcThisWeekTotal()メソッド

この2ヶ所の修正を行う

computed: {
calcThisWeekTotal() {
# this.userTotalは画面描画時しか値が取得できない為、削除
-var data_date = new Date(this.userTotal.created_at); // 最新のレコードの作成日を日付型で取得
# this.studiesでjsonを取得し、その1番後ろの配列を取得
+var latestDate = this.studies.slice(-1)[Const.INT_ZERO];
# マウント時のundefinedエラー回避
+if(latestDate) {
最新のレコードの作成日を日付型で取得
+var data_date = new Date(latestDate.created_at);
+}
}
}

これでデータをpostした後でも、this.studiesがメソッドを呼ぶ度に取得できるようになり、最新レコードのcreated_atを取得する事ができる

methods: {
postStudyTime() {
# this.userTotalは画面描画時しか値が取得できない為、削除
-var calcTotalValue = parseFloat(this.userTotal.total) + parseFloat(this.study.time);
# totalをpostする為、最新のstudies.totalを取得する処理
+var getArray = this.studies;
+if(getArray.length == Const.INT_ZERO) { // 配列が無い場合(データがまだ無いユーザー)
 # エラー回避の為「0」を返す
var latestTotal = 0;
+} else { // 配列がある場合(既にデータを持っているユーザー)
# 1番後ろの配列からtotalを取得する(最新の値)
+var latestTotal = getArray.slice(-1)[Const.INT_ZERO].total;
# 最新totalを取得し、画面で入力したtimeと足し算する
+var calcTotalValue = parseFloat(latestTotal) + parseFloat(this.study.time);
+}
}
}

これでデータをpostした後でも、this.studiesがメソッドを呼ぶ度に取得できるようになり、最新レコードのtotalを取得する事ができる

suzy1031 / everyday-study-app

`Record.vue`非同期処理の修正 #36