keep-alive+vuex+vue-router動的キャッシュh 5ページの実装

会社でvueを使ってh 5を書くのはもう1年以上になりました.期間の心得をまとめると、もっと良い方法があるかもしれません.皆さんのご指摘を歓迎します.
第1編は主にh 5ページを動的にキャッシュする方法を書きます.
h 5体験を十分によくするためには、毎回バックエンドにデータを要求するのではなく、キャッシュを十分に利用することが最善の方法です.
次に、ユーザは、トップページAからあるリストページBにアクセスする際に、リアルタイムで最新のデータを取得し、あるメッセージをクリックして詳細ページCにアクセスし、リストページBに戻る際に、キャッシュデータを直接利用して要求を送信せず、現在のリストページBがスクロールしている位置を記憶する必要がある.
vueを知る子供靴はkeep-aliveを思い浮かべるかもしれませんが、ページをどのように制御していつキャッシュを利用していつ使わないのでしょうか.ここでは、キャッシュするページ名を保存するためにvuexを使用しました.
まず、最上位のページを適用する.vueではkeep-aliveを以下のように設定します.

ここでcacheComponentsは、キャッシュするページコンポーネントの名前からなる配列であり、vuexのグローバル状態に維持されます.
state.jsファイル

const state = {
    cacheComponents: ['B'],
}

export default state;

mutation.jsファイル

const mutations = {
  ADD_CACHE_COMPONENT(state, component = {}) {
    if (!state.cacheComponents.includes(component.name)) {
      state.cacheComponents = [...state.cacheComponents, component.name];
    }
  },

  REMOVE_CACHE_COMPONENT(state, component = {}) {
    if (state.cacheComponents.indexOf(component.name)) {
      state.cacheComponents.splice(
        state.cacheComponents.indexOf(component.name),
        1,
      );
    }
  },
};

export default mutations;

これにより、vuexのcommitでグローバルstateのcacheComponents配列を操作して、キャッシュするページを動的に制御できます.
では、cacheComponentsはいつ変わるかどうやって知っていますか?実際には、vue-routerのrouterインスタンスのbeforeEachを使用して、次のように傍受できます.
route.jsファイル

import Vue from 'vue';
import Router from 'vue-router';
import routes from './route-list';
import store from '@/common/store';
import cachedCompHandler from '@/common/utils/cachedCompHandler';

Vue.use(Router);

const router = new Router({
  routes,
});

router.beforeEach((to, from, next) => {
  cachedCompHandler(to, from, store);
  ...
}

ここで、cachedCompHandler法は、AからBに入るとcacheComponentsからBが除去され、そうでなければBが加算される.

export default function cachedCompHandler(to, from, store) {
  if (from.name === 'A' && to.name === 'B') {
    store.commit('REMOVE_CACHE_COMPONENT', {
      name: 'B',
    });
  } else {
    store.commit('ADD_CACHE_COMPONENT', {
      name: 'B',
    });
  }
}

最後に、もしこれが承認されるリストであれば、ユーザーはある項目をクリックして詳細ページに入り、戻るときにリストにないことを望んでいますが、同時にキャッシュを利用して要求を送信しません.
このときkeep-aliveに対応するvueライフサイクルactivated/deactivatedを組み合わせなければなりません.このライフサイクルはkeep-aliveのコンポーネントによって唯一トリガーできるフックです.
ユーザが何らかの処理に成功した場合、リストに戻るとlocalstorageまたはurlでidを返すことができ、リストページBのactivatedフックでは、コンポーネント状態dataに維持されている対応するデータをクリアすればよい.
ここでダイナミックキャッシュh 5に関する心得を共有します.もっと良い方法があれば、指摘を歓迎します.
また最近、VeeコードをReactコードにコンパイルする変換器を書いていますので、ご確認ください.
github.com/mcuking/vue…
転載先:https://juejin.im/post/5d05ca7051882570ec017be6