ｍAPI実行後、変数が初期値に戻ってしまう

Question

Vue.js + TypeScriptで検索ページを作っています。

        public async setGateLog() {
            console.log('SETGATELOG');
            console.log(this.fromDateString);
            console.log(this.toDateString);
            const req = {
                code: [],
                limit: 50,
                page: 0,
                end: this.toDateString,
                start: this.fromDateString,
            };
            const gateLogRes = await Axios.post(process.env.VUE_APP_HOST + 'gatelog/list/find', req);
            console.log(this.fromDateString);
            console.log(this.toDateString);
            this.gateLog = gateLogRes.data.gatelog;
        }

上記の関数の中で、
const gateLogRes = await Axios.post(process.env.VUE_APP_HOST + 'gatelog/list/find', req);
を実行する前と後で
this.fromDateStringとthis.toDateStringの値が変わってしまいます。
具体的に言うと、初期値に戻ってしまいます。

原因わかりますでしょうか？

#試したこと
const gateLogRes = await Axios.post(process.env.VUE_APP_HOST + 'gatelog/list/find', req);
をコメントアウトすると変数は初期値に戻りませんでした。

Comments

[hoshi-takanori]

呼び出し側で変数を初期化しているのでは？

[ntsuji]

いえ、const gateLogRes = await Axios.post(process.env.VUE_APP_HOST + 'gatelog/list/find', req);
を削除すると初期化されないので、呼び出し側の問題ではないと思われます。

[hoshi-takanori]

非同期処理では、await でいったん関数の処理を中断して呼び出し側に処理を戻して、Axios.post の結果が帰ったきたら残りの処理を再開します。その行を削除すると初期化されないということは、呼び出し側の問題だと思いますよ。

[ntsuji]

なるほど、そうなんですね。
失礼致しました。
ありがとうございます。
そのことをふまえて再度調査してみます。