vue のキャッシュを実装するにはいくつかの方法があります

Vue にはデータをキャッシュする 4 つの方法があります: 1. localStorage を使用する、構文「localStorage.setItem(key, value)」; 2. sessionStorage を使用する、構文「sessionStorage.setItem(key, value)」; 2. sessionStorage を使用する、構文「sessionStorage.setItem(key, value)」。 3. storage.js プラグインをインストールして参照し、キャッシュにプラグインを使用します; 4. Vue.js アプリケーション用に特別に開発された状態管理モードである vuex を使用します。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vu でキャッシュを実装するいくつかの方法:

最初の 2 つ

* localStorage

  window.localStorage.setItem(key,value)
  window.localStorage.getItem(key)

* sessionStorage

 window.sessionStorage.setItem(key,value)
  window.sessionStorage.getItem(key)

localStorage と sessionStorage の違い

https://blog.csdn.net/qq_31741481/article/details/88054069

3 番目の方法 (推奨) - storage.js

使用方法:

import storage from 'store'
// Store current user
store.set('user', { name:'Marcus' })

// Get current user
store.get('user')

// Remove current user
store.remove('user')

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
	console.log(key, '==', value)
})

テスト済み、デフォルトは localStorage に保存されます

store.js にはさまざまな内容が含まれていますたとえば、localStorage が失敗する一部のシナリオでは、cookieStorage.js を使用できます。これをマスターすれば、基本的にすべてのキャッシュ ソリューションを一度に理解できるようになります。

• all.js すべてのストレージを 1 つの便利な場所にまとめます。
• localStorage.js localStorage に値を保存します。最新のすべてのブラウザ。
• sessionStorage.js 値を sessionStorage に保存します。
• cookieStorage.js 値を Cookie に保存します。 Safari プライベート モード。
• memoryStorage.js 値をメモリに保存します。常にストア機能を確保するための優れたフォールバック。
• oldFF-globalStorage.js 値を globalStorage に保存します。従来の Firefox 3 でのみ有効です。
• oldIE-userDataStorage.js 値を userData に保存します。従来の IE 6 でのみ有効です。

詳細については、公式 :store.js (https://github.com/marcuswestin/store.js#readme)を参照してください。

4 番目のタイプ - vuex

は、より複雑な vue シングルページ アプリケーションの構築に適しています。

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して状態が予測可能な方法で変化することを保証します。 Vuex は、Vue の公式デバッグ ツール devtools 拡張機能にも統合されており、ゼロ構成のタイムトラベル デバッグ、ステータス スナップショットのインポートおよびエクスポートなどの高度なデバッグ機能を提供します。

[関連する推奨事項:「

vue.js チュートリアル 」]

以上がvue のキャッシュを実装するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。