前回までのあらすじ
DBから得たデータを表示するページに、定期的に最新の情報を取得しなおすように修正を加えています。
前回まででデータ取得をAPI化し、取得したデータをVueで扱いやすいように加工する処理を書いてました。
https://techblog.jasmine-s.com/chanchanrk-20200821-314
setIntervalで定期的に読み込む処理を書いた
こんな感じになりました。
readContentsがAPIを呼んでデータを取得する関数で、それをsetIntervalに渡しています。
var self = this;
setInterval(readContents, 30000, self);setIntervalには注意点がある
setIntervalを使う場合には注意点がいくつかあるそうです。
・SPAでページ遷移後もsetIntervalが有効になってしまう
・ブラウザやタブが非表示の間にも定期実行されてしまう
・開発時にも定期実行されてしまう
今回はVueを特定のページにだけ適用していて、main.jsでVueのインスタンスを作ってページ間でVueを使い回す方法ではなかったためこれらを考慮するコードを書きませんでしたが、今後参考にしたいと思います。
【参考ページ】
Vue.jsで定期的にバックエンドと通信したいときに気にしたい3つのこと - プラグイン作成で解決
https://tech.smartcamp.co.jp/entry/2019/08/08/185351
UdemyでDockerの講座を買った
タイトルと関係ありませんが、Udemyの講座を買ったのでまた自宅でこつこつと講座をやってみます。
https://www.udemy.com/course/aidocker/