Framework7のrouter.backで戻っても最新データに更新したい
- 2022/03/31
- murave
- Framework7
- Vue.js
関係の技術記事書こうかと思ったんだけど、リタイアしたのでこれだけ書いとこうかと
— murave (@murave) March 30, 2022
昨日はリタイアしたけど、今日はがんばる。
日本語サイト(https://framework7.jp/)から引用すると
Framework7 – は、ネイティブなルック＆フィールを持つモバイル、デスクトップ、またはウェブアプリケーションを開発するためのフリーでオープンソースのフレームワークです。また、必要に応じてアプリのプロトタイプをすぐに表示できる、不可欠なプロトタイピングツールでもあります。
といったものです。
弊社の場合、まずはプロトタイプ作成に使用され「Vue3対応してるしアプリ開発もそのままいこうぜ」といった流れだった気がします(確かそのタイミングでスポンサーになった)
使ってみた感じフルスタックなフレームワークという印象で、Vue.js、React、Svelteのコンポーネントもあってエライです。前述のとおり弊社では Framework7 Vue + Vue3 を採用しています。
さて、本題。Framework7は独自のrouterをもっています。今回は関係ないですが独自のstoreも持ってます。あふれるフルスタック感。
routerに話を戻すと、特定条件下ではヒストリーをもたせることができ、router.backでヒストリーにキャッシュされた前のページに戻るとことができます。便利な機能です。特にモック段階では。
モックを元に本番実装を進めていたある日、はたと困りました。
「router.backして戻った先の表示データを最新に更新したいけど、どうしよう」
もちろん普通に遷移(router.navigate)させてサーバーからデータを再取得させるのは可能です。しかしそれをやると戻ったつもりがヒストリーに積まれてしまい戻り先でさらに「戻る」(router.back)させたときに挙動が想定からはずれてしまいます。
『トップ』から『リスト画面』を開き『詳細画面』に遷移したのちに戻ったとすると
『トップ』 -navigate-> 『リスト画面』 -navigate-> 『詳細画面』 –back-> 『リスト画面』 -back-> 『トップ』
となってほしいところが
『トップ』 -navigate-> 『リスト画面』 -navigate-> 『詳細画面』 –navigate-> 『リスト画面』 -back-> 『詳細画面』
となってしまうわけです(変更したbackとnavigateに下線つけてます)
すべてnavigateにしてアプリ側でコントロールする、というのは避けたいところなのでいろいろと調査・検討しました。
ヒストリー弄ってみたりといろいろと試してたんですがありましたよ「これだ！」というイベントが。それはpage:reinit(pageReinit)。日本語サイトのページ(https://framework7.jp/docs/page.html)から引用します。
このイベントは、すでに初期化されたページに移動した場合に発生します。
前に挙げた遷移の例だと、『リスト画面』から『詳細画面』への遷移(navigate)する際にこのイベントでサーバーからのデータ取得を行うように仕込んでおけば『詳細画面』から戻る(back)した際にデータの再取得がおこなわれます。
router.onceで一度だけイベント処理を行うという設定が可能なので疑似コードは以下のようになります(Framework7 Vue + Vue3の場合)
const props = defineProps({
f7router: Object,
});
const { f7router } = props;
const 詳細画面に遷移 = () => {
f7router.once('pageReinit', async (pageData) => {
await データ取得();
});
f7router.navigate('/詳細画面/');
}
リスト画面でデータ取得のために指定されたパラメータは残っていますので利用者が意図した条件のまま最新データに更新されます。
タグ: Framework7, Vue.js
