Vue でデータ キャッシュとローカル ストレージを実装する方法

Vue でデータ キャッシュとローカル ストレージを実装する方法

Vue 開発では、パフォーマンスを向上させるために一部のデータをキャッシュしたり、データをローカルに保存したりする必要があることがよくあります。ストレージ要件。この記事では、Vue を使用してデータ キャッシュとローカル ストレージを実装する方法を紹介し、具体的なコード例を示します。

1. データ キャッシュ

データ キャッシュにより、ネットワーク リクエストが削減され、ユーザー エクスペリエンスとアプリケーションのパフォーマンスが向上します。 Vue は、計算されたプロパティを使用してデータをキャッシュする便利な方法を提供します。

最初に、Vue コンポーネントにキャッシュする必要があるデータ プロパティを定義します:

data() {
  return {
    userList: [], // 需要缓存的数据
  };
},

次に、計算されたプロパティにキャッシュする必要があるデータを取得して返します:

computed: {
  cachedUserList() {
    // 如果缓存中已有数据，直接返回缓存数据
    if (localStorage.getItem("userList")) {
      return JSON.parse(localStorage.getItem("userList"));
    } else {
      // 如果缓存中没有数据，发送网络请求获取数据
      // 并将数据缓存到本地存储
      axios.get("/api/userList").then((res) => {
        this.userList = res.data;
        localStorage.setItem("userList", JSON.stringify(res.data));
      });
      return this.userList;
    }
  },
},

上記のコードでは、まず、キャッシュされたデータが localStorage に既に存在するかどうかを判断し、存在する場合はキャッシュされたデータを直接返します。存在しない場合は、ネットワーク リクエストを送信してデータを取得し、取得したデータを localStorage にキャッシュします。

この計算されたプロパティをテンプレートで使用します:

<ul>
  <li v-for="user in cachedUserList" :key="user.id">{{ user.name }}</li>
</ul>

この方法では、コンポーネントがレンダリングされるたびに、まずキャッシュからデータを取得しようとし、必要な場合にのみリクエストを送信します。キャッシュにデータがありません。

2. データ ローカル ストレージ

永続ストレージまたはページ間のデータ共有の目的で、ユーザーのローカル ストレージにデータを保存したい場合があります。 Vue は、データのローカル ストレージを実装するための localStorage オブジェクトを提供します。

localStorage を使用してデータを保存するのは非常に簡単です。以下は、ローカルに保存されたデータを保存および取得する方法を示す例です:

// 保存数据到本地存储
localStorage.setItem("username", "John");

// 从本地存储中获取数据
const username = localStorage.getItem("username");
console.log(username); // 输出：John

Vue では、ローカルに保存する必要があるデータを localStorage に保存し、それをコンポーネントの計算されたプロパティで使用したり、で使用されるライフサイクルメソッド。

たとえば、Vue コンポーネントでローカル ストレージを必要とするデータ属性を定義します。

data() {
  return {
    username: "", // 需要保存到本地存储的数据
  };
},

次に、コンポーネントのライフサイクル メソッド (created など) で、ローカル ストレージからデータを取得します。値 Give 属性を割り当てます:

created() {
  this.username = localStorage.getItem("username");
},

この時点で、コンポーネントのユーザー名属性はローカル ストレージ内の値に初期化されます。

ユーザーによるデータの変更に対応するために、監視オプションを使用してユーザー名属性の変更を監視し、変更があった場合にローカル ストレージを更新できます。

watch: {
  username(newUsername) {
    localStorage.setItem("username", newUsername);
  },
},

このようにして、ユーザーがユーザー名を変更すると、ローカルのユーザー名も変更されます。それに応じてストレージ内の値も更新されます。

要約すると、Vue はデータ キャッシュとローカル ストレージを実装するための便利なメソッドを提供します。これらは、計算されたプロパティと localStorage オブジェクトを通じて実現できます。これにより、アプリケーションのパフォーマンスが向上するだけでなく、永続的なストレージとデータのクロスページ共有も可能になります。上記は、Vue を使用してデータ キャッシュとローカル ストレージを実装するための具体的なコード例です。

以上がVue でデータ キャッシュとローカル ストレージを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。