【Vue】データをキャッシュする方法まとめ

キャッシュ方法

ローカルストレージ
セッションストレージ
storage.js (実際には、複数のメソッドのコレクションには最初の 2 つも含まれます)
vuex
keep-alive (主にコンポーネントの状態を保存したり、再レンダリングや自動キャッシュを回避したりするために使用されます。単独では読み書きできません)

ローカルストレージ

データは長期間保存できますが、ユーザーが localStorage 情報を知らない限り、データは常に存在します。同じブラウザ、異なるページ間でデータを共有できます。

//存
// 将this.pickerItem的数据存储入insuranceCode,需提前转化成string类型
localStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));
//取
JSON.parse(localStorage.getItem("insuranceCode"));
//清除某一项
localStorage.removeItem("insuranceCode");
//清除所有
localStorage.clear();

セッションストレージ

データの短期保存。ユーザーがタブを閉じるかブラウザを直接閉じると、データは消去されます。同じブラウザの異なるページ間でデータを共有することはできません

//存
sessionStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));
//取
JSON.parse(sessionStorage.getItem("insuranceCode"));
//清除某一项
sessionStorage.removeItem("insuranceCode");
//清除所有
sessionStorage.clear();

vuex

1. vuex を作成するには、
まず、index.js を含む新しいストアフォルダーを作成する必要があります。プロジェクトが大きすぎる場合は、js を書き込むための modules フォルダーを追加します。ここで、modules フォルダー内にproudct.js ファイルを作成します。
ここに画像の説明を挿入
リンゴを置くのと同じvuexを書く必要があるので、最初にフルーツプレートを購入する必要があります。
ここでは、proudct という名前を付けました。コードは次のとおりです。

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const state = {
    
    
 id:null,
 code:null,

}
const mutations = {
    
    
  //保存数据
  CHANGE_ACTIVE_LI(state, {
     
      id, code }) {
    
    
    state.id = id
    state.code = code
  },
   //清除数据
   SET_CLEAR_DATA(state,data){
    
    
    state.id=data
  }
}
const actions = {
    
    
  //保存数据
  changeSetting({
     
      commit }, data) {
    
    
    commit('CHANGE_ACTIVE_LI', {
    
     id: data.id, code: data.code })
  },
  //清除数据
  clearVuex({
     
      commit }) {
    
    
    commit("SET_CLEAR_DATA", null);
  },

}
export default {
    
    
  //解决模块名冲突
  namespaced: true,
  state,
  mutations,
  actions

このステップは非常に重要です。
ここに画像の説明を挿入

2. データを保存する

 next() {
    
    
 //这里的product/changeSetting是指定vuex中的方法，我这里指定把后面的对象加在prouduct中changeSetting方法里面去
      this.$store.dispatch("product/changeSetting", {
    
    
        id: this.id,
        code: this.code,
      });
    },

3. データを取り出す

//取出vuex中proudct.js中的id的值
  this.id = this.$store.state.product.id;

ここまで、この方法の欠点を見てきましたが、大量のデータを入れたい場合は、キーの値をたくさん書かなければならず、this.$store.state.product もたくさん書かなければなりません。値を取得するとき id;
したがって、この問題を解決するには、オブジェクトを保存できる補助関数を使用できます。

ストレージ.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 にはさまざまなストレージソリューションが含まれており、たとえば、cookieStorage.js は一部の localStorage 障害シナリオで使用できます。これをマスターすると、基本的にすべてのキャッシュソリューションを一度に把握できるようになります。

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 以降でのみ役立ちます
。

生き続ける

小道具：

include - 文字列または正規表現。名前が一致するコンポーネントのみがキャッシュされます。
exclude - 文字列または正規表現。名前が一致するコンポーネントはキャッシュされません。
max - 数値。キャッシュできるコンポーネントインスタンスの最大数。

使用法：

動的コンポーネントをラップする場合、非アクティブなコンポーネントのインスタンスは破棄されずにキャッシュされます。同様に、は抽象コンポーネントです。DOM 要素自体をレンダリングせず、コンポーネントの親コンポーネントチェーンにも表示されません。

コンポーネントが内部で切り替わると、アクティブ化および非アクティブ化された 2 つのライフサイクルフック関数がそれに応じて実行されます。

2.2.0 以降では、アクティブ化および非アクティブ化は、ツリー内のすべてのネストされたコンポーネントに対して起動されます。

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

は、その直接のサブコンポーネントの 1 つが切り替えられるときに使用されることに注意してください。v-for が入っている場合は機能しません。上記の条件子要素が複数ある場合、同時にレンダリングする必要がある子要素は 1 つだけです。

含める、および除外する

include および exclude プロパティを使用すると、コンポーネントを条件付きでキャッシュできます。どちらも、コンマ区切りの文字列、正規表現、または配列として表すことができます。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

照合では、まずコンポーネント自体の name オプションがチェックされ、name オプションが使用できない場合は、ローカルに登録された名前 (親コンポーネントのコンポーネントオプションのキー値) と照合されます。匿名コンポーネントは照合できません。

最大

キャッシュできるコンポーネントインスタンスの最大数。この数に達すると、新しいインスタンスが作成される前に、アクセスされていないキャッシュされたコンポーネントの最も古いインスタンスが破棄されます。

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

機能コンポーネントはインスタンスをキャッシュしないため、機能コンポーネントでは正しく動作しません。

参考

Vue.Js コンポーネントのキープアライブ
 vue がデータを保存するためのいくつかの方法 (Vuex およびローカルストレージ)
vue キャッシュを実装する方法はいくつかあります