Vue モバイル プロジェクトでページ キャッシュを実装する方法のサンプル コード

Vue モバイル プロジェクトでページ キャッシュを実装する方法のサンプル コード

背景

モバイル デバイスでは、ページ ジャンプ間のキャッシュが必須要件です。

例: ホームページ => リストページ => 詳細ページ。

ホームページからリストページに入るときはリストページを更新する必要があり、詳細ページからリストページに戻るときはリストページがページキャッシュを保持する必要があります。

ホームページについては、通常はキャッシュされた状態で保存されます。

詳細ページはどの入口から入っても更新されます。

実装のアイデア

ページ キャッシュといえば、vue の keep-alive コンポーネントについて言及する必要があります。keep-alive はルーティング キャッシュ機能を提供します。この記事では主に、keep-alive と vuex を使用して、アプリケーションでページ ジャンプ キャッシュを実装します。

Vuex は、現在キャッシュする必要があるページを保存するために配列 cachePages を維持します。
キープアライブ インクルードは cachePages に設定されています。
ルート メタにカスタム フィールド needCachePages または keepAlive を追加します。needCachePages は配列であり、ルートによって入力されるページが配列内にある場合、ルートがキャッシュされることを意味します。keepAlive は、アプリのホームページなど、どのページが入力されてもキャッシュが保持されることを意味します。
ルーティング ガード beforeEach では、ジャンプするルーティング ページが現在のルートの needCachePages 内にある場合、現在のルートが cachePages に追加され、そうでない場合は削除されます。

具体的な実装

Vuex実装コンテンツ

// src/store/modules/app.js

エクスポートデフォルト{
 州: {
  // ページキャッシュ配列 cachePages: []
 },
 
 突然変異:
  // キャッシュページを追加 ADD_CACHE_PAGE(state, page) {
   if (!state.cachePages.includes(ページ)) {
    state.cachePages.push(ページ)
   }
  },
  
  // キャッシュページを削除する REMOVE_CACHE_PAGE(state, page) {
   if (state.cachePages.includes(ページ)) {
    state.cachePages.splice(state.cachePages.indexOf(ページ), 1)
   }
  }
 }
}


// src/store/getters.js

const ゲッター = {
 キャッシュページ: 状態 => state.app.cachePages
}
デフォルトのゲッターをエクスポートする

// src/store/index.js

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
Vue.use(Vuex)

'./modules/user' からユーザーをインポートします
'./modules/app' からアプリをインポートします
'./getters' からゲッターをインポートします

// ストアオブジェクトをエクスポートする export default new Vuex.Store({
 ゲッター、
 モジュール:
  ユーザー、
  アプリ
 }
})

App.vueでは、keep-alive includeはcachePagesを設定します。

<keep-alive :include="cachePages">
 <ルータービュー:key="$route.fullPath"></ルータービュー>
</キープアライブ>

計算: {
 ...mapGetters([
  'キャッシュページ'
 ])
}

ルーティング構成

{
  パス: '/home',
  名前: 'ホーム'、
  コンポーネント: () => import('@/views/tabbar/Home'),
  メタ: {
   タイトル: 'ホームページ'、
   キープアライブ: 真
  }
},
{
  パス: '/list',
  名前: 'リスト',
  コンポーネント: () => import('@/views/List'),
  メタ: {
   タイトル: 「リストページ」
   必要なキャッシュページ: ['ListDetail']
  }
},
{
  パス: '/list-detail',
  名前: 'ListDetail',
  コンポーネント: () => import('@/views/Detail'),
  メタ: {
   タイトル: 「詳細ページ」
  }
}

ルートガード

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
'@/store' からストアをインポートします
Vue.use(ルーター)

// モジュール フォルダー内のすべてのルートをインポートします。const files = require.context('./modules', false, /\.js$/)
モジュール = []
files.keys().forEach(キー => {
 モジュール = modules.concat(ファイル(キー).default)
})

// ルーティング constroutes = [
 {
  パス: '/'、
  リダイレクト: '/home',
 },
 ...モジュール
]

const router = 新しいルーター({
 モード: 'ハッシュ'、
 ルート: ルート
})


関数 isKeepAlive(ルート) {
 ルートメタとルートメタのkeepAliveの場合{
  store.commit('ADD_CACHE_PAGE', ルート名)
 }
 ルートの子の場合{
  ルート.children.forEach(child => {
   isKeepAlive(子)
  })
 }
}

ルート.forEach(item => {
 isKeepAlive(アイテム)
})

// グローバルルーティングガード router.beforeEach((to, from, next) => {
 if (from.meta.needCachePages && from.meta.needCachePages.includes(to.name)) {
  store.commit('ADD_CACHE_PAGE', from.name)
 } そうでない場合 (from.meta.needCachePages) {
  store.commit('REMOVE_CACHE_PAGE', from.name)
 }
 // ページの最初のキャッシュ障害が発生します。vuex からキープアライブキャッシュへの遅延があると推測されます。 // ここでは、100 ミリ秒の遅延を使用して解決します setTimeout(() => {
  次()
 }, 100)
})

デフォルトルーターをエクスポートする

ページスクロールバーの位置を復元する

このときページはキャッシュされますが、スクロールバーは毎回一番上に戻ります。

キャッシュされたページの場合、アクティブ化されたフックと非アクティブ化されたフックがトリガーされ、これら 2 つのフックを使用してスクロール バーの位置を復元できます。

ページを離れたとき、つまり非アクティブ化がトリガーされたときに、スクロール バーの位置が記録されます。

ページに戻ると、つまり activated がトリガーされると、スクロール バーの位置が復元されます。

// ミックスインを作成する
// src/mixins/index.js

エクスポートconst savePosition = (scrollId = 'app') => {
 戻る {
  データ() {
   戻る {
    マイスクロールトップ: 0
   }
  },
  
  アクティブ化() {
   定数ターゲット = document.getElementById(スクロールId)
   ターゲット && target.scrollTop = this.myScrollTop
  },
  
  beforeRouteLeave(to, from, next) {
   定数ターゲット = document.getElementById(スクロールId)
   this.myScrollTop = target.scrollTop || 0
   次()
  }
 }
}

ここで、deactivated を使用するとページがすぐに非表示になり、取得されたノードのスクロール バーの高さが 0 になることが判明したため、beforeRouteLeave が使用されます。

キャッシュが必要なページで使用してください

<スクリプト>
'@/mixins' から { savePosition } をインポートします。

エクスポートデフォルト{
 ミックスイン: [新しい savePosition()]
}
</スクリプト>

ページでスクロールコンテナをカスタマイズする場合は、スクロールコンテナIDを渡すことができます。

<テンプレート>
  <div id="スクロールコンテナ" スタイル="高さ: 100vh; オーバーフロー-y: スクロール;">

  </div>
</テンプレート>

<スクリプト>
'@/mixins' から { savePosition } をインポートします。

エクスポートデフォルト{
 ミックスイン: [新しい savePosition('scroll-container')]
}
</スクリプト>

知らせ

友人からよく「設定してもキャッシュ効果がないのはなぜですか?」と質問されます。

このとき、1 つの問題に注意する必要があります。keep-alive の鍵の 1 つは、ルート内の名前が .vue ファイル内の名前と一致している必要があることです。

キャッシュが有効にならない場合は、まず 2 つの名前と needCachePages が一致しているかどうかを確認してください。

考えと欠点

この解決策は、私が 1 年以上前に行ったものです。今でも、ルートで needCachePages を毎回構成する必要があるなど、まだいくつかの欠点があると思います。

実際、モバイル デバイスでは、ミニ プログラムを開発するときと同じように、前のページに戻ると、前のページが常にキャッシュされます。navigateTo を呼び出して戻ると、ページは常にキャッシュされるため、手動で構成する必要はありません。

そこで、Vue でグローバル ジャンプ API を提供するというアイデアが生まれました。API が呼び出される限り、現在のページがキャッシュされます。更新操作が必要な場合は、ミニ プログラムで onShow のようにアクティブ化されたロジックを実行できます。

これで、Vue モバイル プロジェクトでページ キャッシュを実装する方法に関するこの記事は終了です。Vue ページ キャッシュに関するその他のコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ページキャッシュ操作を実現するためのVueページジャンプ
  • Vue2.0 でページキャッシュと非キャッシュを実装する方法
  • Vue プロジェクトでページ キャッシュを強制的にクリアする例
  • タブページキャッシュ機能を実装するためのvuex + keep-alive
  • Vue サーバーサイドレンダリングページキャッシュとコンポーネントキャッシュの詳細な例
  • Vueプロジェクトのグローバル設定ページキャッシュにおけるオンデマンドキャッシュ読み取りの実装の詳細な説明
  • Vue ベースのモバイル Web アプリ ページ キャッシュ ソリューションの詳細な説明
  • Vue のページ キャッシュ問題の詳細な説明 (2.0 ベース)
  • Vueはページキャッシュ機能を実装する

<<:  CentOS 7にChromeブラウザをインストールする方法

>>:  メモリ構成が過剰でMySQLが起動できない問題の解決方法

推薦する

要素の高さを下から上へ、上から下へ制御する CSS メソッド

よくある質問から議論を始めましょう。CSS を使用して要素の高さを [ブラウザ コンテンツ ウィンド...

MySQLの重複排除操作を極限まで最適化する方法

目次1. インデックスと変数の賢い使用1. インデックスなしの比較テスト2. created_tim...

Vue+SpringBoot で Alipay サンドボックス決済を実装するためのサンプルコード

まず、Alipay サンドボックスから一連のものをダウンロードします。多くのブログで取り上げられてお...

CSSスタイルで実現されるHTML背景色のグラデーション効果

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討でき...

React Hook の使用例 (一般的なフック 6 つ)

1. useState: 関数コンポーネントに状態を持たせる使用例: // カウンター impor...

DockerコンテナのライフサイクルアーキテクチャとVMとの違いについて詳しく説明します。

コンテナのライフサイクルコンテナランタイムのライフサイクルコンテナは、分離特性を持つプロセスのセット...

JavaScript ES6 モジュールの詳細な説明

目次0. モジュールとは何か1.モジュールの読み込み1.1 方法1 1.2 方法2 2. 輸出と輸入...

Linuxで大きなファイルを素早くコピーする方法

データをコピーリモートでデータをコピーする場合、通常は rsync コマンドを使用しますが、小さなフ...

ホバープロンプトにはvue2+elementuiを使用する

Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...

html の img src="" で js 関数または js 変数を呼び出して、画像パスを動的に指定します。

この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...

Tomcat のインストール後に起こりうる問題の紹介

1. Tomcatサービスが開いていませんブラウザのアドレスバーにlocalhost:8080と入力...

Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析

<br />関連記事: Facebookの情報アーキテクチャの分析 元記事: http:...

MySQL の永続性とロールバックの原理を 1 つの記事で理解する

目次再実行ログディスクデータを直接更新するのではなく、最初にメモリデータを更新する必要があるのはなぜ...

KVM 仮想マシンのオンライン ホット マイグレーションを実装する方法 (画像とテキスト)

1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...