非常に快適な Vue ページ維持ソリューションを共有する

この記事は、Vue に関する関連知識を提供します。主に、非常に快適な Vue ページ維持ソリューションを共有します。コード例もあります。興味のある友人は、以下を参照してください。皆さんが協力してくれることを願っています。

ページのキープアライブをより安定させるには、何をしますか?

#1 行の設定で実装しました

Vue ページのキープアライブとは、ユーザーが現在のページを離れた後に、最後に表示したページの状態を復元するに戻ることができます。この技術により、ユーザーは煩雑な操作に邪魔されることなく、よりスムーズで自然なブラウジング体験を楽しむことができます。

なぜページを存続させておく必要があるのでしょうか?

ページを維持すると、ユーザー エクスペリエンスが向上します。例えば、ページネーションのある表ページ（[ページA]）からデータ詳細ページ（[ページB]）にジャンプし、データを閲覧した後、[ページB]から[ページA]に戻った場合] の場合、ページキープアライブがない場合、[ページ A] がリロードされて最初のページにジャンプし、ページとデータを再度選択する必要があるため、ユーザーは非常に煩わしくなります。したがって、ページキープアライブ技術を使用すると、ユーザーが[ページA]に戻ったときに、以前に選択していたページ番号とデータが復元され、ユーザーエクスペリエンスがよりスムーズになります。

ページを存続させるにはどうすればよいですか?

状態ストレージ

このソリューションは最も直観的であり、原則は、[ページ A] を離れる前に維持する必要がある状態を手動で保存することです。状態は、

LocalStore、SessionStore、または IndexedDB に保存できます。 [Page A] コンポーネントの onMounted フックで、以前の状態が存在するかどうかを確認し、存在する場合は外部ストレージから状態を復元します。 ＃＃＃＃＃＃何が問題ですか？

心の無駄（悩み/心配）。このソリューションの問題は、コンポーネントを作成するときに、特定のページにジャンプするときに状態を保存することを明確に知っておく必要があることです。

子コンポーネントの状態を解決できません。ページコンポーネントのステータスをページコンポーネントに保存することもできますが、サブコンポーネントを保存する方法。このような構造は合理的ではないため、ページ コンポーネント内のすべてのサブコンポーネントの状態を維持することは不可能です。
• コンポーネントのキャッシュ

Vue

の組み込みコンポーネントを使用する

<keepalive></keepalive>でラップされた動的スイッチング コンポーネントをキャッシュします。それ (これは コンポーネントでもあります)。 <keepalive></keepalive>動的コンポーネントをラップする場合、非アクティブなコンポーネントは破棄されずにキャッシュされます。コンポーネントが <keepalive></keepalive> で切り替えられると、activated および deactivated ライフサイクル フックが mounted および unmounted を置き換えます。 ＃＃＃針。最も重要なことは、<keepalive></keepalive> は、ラップされたコンポーネントのルート ノードだけでなく、その子孫ノードにも適用されるということです。 <keepalive></keepalive>

vue-router

と組み合わせると、ページを維持できます。実装コードは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;template&gt; &lt;RouterView v-slot=&quot;{ Component }&quot;&gt; &lt;KeepAlive&gt; &lt;component :is=&quot;Component&quot;/&gt; &lt;/KeepAlive&gt; &lt;/RouterView&gt; &lt;/template&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>## ＃どうしたの？ ？ ページ キープアライブは不正確です。上記の方法ではページキープアライブは実現できますが、例えば[ページA]がアプリケーションのホームページ、[ページB]がデータ一覧ページ、[ページC]がデータ詳細ページであるなど、運用上の要件を満たすことはできません。ユーザーがデータの詳細を表示するための移動行は次のとおりです: [ページ A]->[ページ B]->[ページ C] この移動行では、[ページ B]->[ページ C] をキャッシュする必要があります[ ページ B]、[ページ C]→[ページ B] に変更する場合は、そこから [ページ B] に戻す必要があります。ただし、[ページB] -> [ページA]の場合、[ページB]をキャッシュする必要はなく、上記の方法ではそのような構成は実現できません。

ベスト プラクティス

キープアライブの最も理想的な方法は、コンポーネント コードに侵入することなく、単純な構成でオンデマンド ページ キープアライブを実現することです。

[コンポーネント コードへの侵入なし] このルールにより、最初のメソッドの実装を排除できます。2 番目のメソッド [コンポーネント キャッシュ] は [オンデマンド ページ キープアライブ] でのみ失敗します。次に 2 番目の方法を変換します。

router のルーティング構成でオンデマンドのキープアライブを構成し、

と組み合わせた読み取り構成を提供します。 include属性だけで十分です。 ルーティング設定src/router/index.ts

import useRoutersStore from '@/store/routers';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/layout/index.vue'),
    children: [
      {
        path: '/app',
        name: 'App',
        component: () => import('@/views/app/index.vue'),
      },
      {
        path: '/data-list',
        name: 'DataList',
        component: () => import('@/views/data-list/index.vue'),
        meta: {
          // 离开【/data-list】前往【/data-detail】时缓存【/data-list】
          leaveCaches: ['/data-detail'],
        }
      },
      {
        path: '/data-detail',
        name: 'DataDetail',
        component: () => import('@/views/data-detail/index.vue'),
      }
    ]
  }
];

router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  const { cacheRouter } = useRoutersStore();
  cacheRouter(from, to);
  next();
});

キープアライブ コンポーネント ストレージ

src/ stroe /router.ts

import { RouteLocationNormalized } from 'vue-router';

const useRouterStore = defineStore('router', {
  state: () => ({
    cacheComps: new Set<string>(),
  }),
  actions: {
    cacheRouter(from: RouteLocationNormalized, to: RouteLocationNormalized) {
      if(
        Array.isArray(from.meta.leaveCaches) && 
        from.meta.leaveCaches.inclued(to.path) && 
        typeof from.name === &#39;string&#39;
      ) {
        this.cacheComps.add(form.name);
      }
      if(
        Array.isArray(to.meta.leaveCaches) && 
        !to.meta.leaveCaches.inclued(from.path) && 
        typeof to.name === &#39;string&#39;
      ) {
        this.cacheComps.delete(to.name);
      }
    },
  },
  getters: {
    keepAliveComps(state: State) {
      return [...state.cacheComps];
    },
  },
});

ページ キャッシュ

src/layout/index.vue

<template>
  <RouterView v-slot="{ Component }">
    <KeepAlive :include="keepAliveComps">
      <component :is="Component"/>
    </KeepAlive>
  </RouterView>
</template>

<script setup>
import { storeToRefs } from &#39;pinia&#39;;
import useRouterStore from &#39;@/store/router&#39;;

const { keepAliveComps } = storeToRefs(useRouterStore());
</script>

TypeScript提升配置体验

import 'vue-router';

export type LeaveCaches = string[];

declare module 'vue-router' {
  interface RouteMeta {
    leaveCaches?: LeaveCaches;
  }
}

该方案的问题

• 缺少通配符处理/*、/**/index。
• 无法缓存/preview/:address这样的动态路由。
• 组件名和路由名称必须保持一致。

总结

通过<routerview v-slot="{ Component }"></routerview>获取到当前路由对应的组件，在将该组件通过<component :is="Component"></component>渲染，渲染之前利用<keepalive :include="keepAliveComps"></keepalive>来过滤当前组件是否需要保活。 基于上述机制，通过简单的路由配置中的meta.leaveCaches = [...]来配置从当前路由出发到哪些路由时，需要缓存当前路由的内容。【推荐学习：《vue.js视频教程》】

如果大家有其他保活方案，欢迎留言交流哦！

以上が非常に快適な Vue ページ維持ソリューションを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。