Vue のキープアライブ コンポーネントがページ間のデータ共有を実装する方法

Vue の keep-alive コンポーネントは、アプリケーションのパフォーマンスを向上させることができるテクノロジです。コンポーネントをキャッシュして、作成と破棄の繰り返しを回避できます。さらに重要なことに、データ共有も実装できます。この記事では、keep-alive コンポーネントの役割と、それを使用してデータ共有を実現する方法を紹介します。

keep-alive コンポーネントとは

keep-alive は Vue によって提供される抽象コンポーネントであり、含まれるコンポーネントをそれぞれのコンポーネントではなくメモリに保存できます。作成した。ラップされたコンポーネントが keep-alive のビュー スイッチに表示されると、keep-alive コンポーネントは再レンダリングされずにその状態を保持します。

キープアライブコンポーネントの重要な用途は、ページ間でのデータ共有を実現することです。通常、異なるルート間のコンポーネントは独立しており、それらの間のデータは共有されません。ただし、一部のデータを異なるページ間で共有したい場合は、keep-alive コンポーネントを使用してこれを実現できます。

keep-alive コンポーネントを使用してデータ共有を実現する方法

まず、keep-alive コンポーネントを使用する前に、共有する必要があるコンポーネントをラップする必要があります。 keep-alive タグの にあるデータ。たとえば、Home と About という 2 つのルートがあり、これら 2 つのページで、userInfo という名前のオブジェクトを共有できるようにしたいとします。 #

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: 'John',
        age: 28,
      },
    };
  },
};
</script>

上記のコードでは、親コンポーネントで

userInfo オブジェクトを定義し、それを keep-alive コンポーネントでラップします。このようにして、Home ページまたは About ページにある userInfo オブジェクトにアクセスできます。

次に、子コンポーネントで

this.$root.userInfo を使用して親コンポーネントの userInfo オブジェクトにアクセスし、データ共有を実現します。たとえば、Home コンポーネントでは、次の方法で userInfo オブジェクトにアクセスして変更できます。

export default {
  data() {
    return {
      userInfo: this.$root.userInfo,
    };
  },
  methods: {
    updateName() {
      this.userInfo.name = 'Tom';
    },
  },
};

同じことが

About にも当てはまります。 共有データにアクセスするコンポーネントの方法。

サンプル アプリケーション

次は、

keep-alive コンポーネントを使用してデータ共有を実現するサンプル アプリケーションです。 Home と About の 2 つのページを含む、シンプルなユーザー情報管理アプリケーションを作成しました。ユーザー情報は Home ページで変更でき、ユーザー情報は About ページで表示できます。

<template>
  <div>
    <h1>Home</h1>
    <input v-model="userInfo.name" />
    <input v-model="userInfo.age" />
    <button @click="updateInfo">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: this.$root.userInfo,
    };
  },
  methods: {
    updateInfo() {
      // Some API call to update user info
    },
  },
};
</script>

<template>
  <div>
    <h1>About</h1>
    <p>Name: {{ userInfo.name }}</p>
    <p>Age: {{ userInfo.age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: this.$root.userInfo,
    };
  },
};
</script>

上記のコードでは、親コンポーネントで

userInfo オブジェクトを定義し、this.$root.userInfo を通じて Home# と共有します # # および About コンポーネント。 Home ページでは、userInfo オブジェクトの値を変更し、更新された値を About ページで確認できます。 概要

keep-alive

コンポーネントは Vue の非常に実用的な機能で、これによりコンポーネントをキャッシュし、ページ間でのデータ共有を実現できます。この記事では、keep-alive コンポーネントを使用してデータ共有を実現する方法とサンプル アプリケーションを紹介します。この記事が、keep-alive コンポーネントの理解と適用に役立つことを願っています。

以上がVue のキープアライブ コンポーネントがページ間のデータ共有を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。