Cara melaksanakan caching data dan storan setempat dalam Vue

Cara melaksanakan caching data dan storan tempatan dalam Vue

Dalam pembangunan Vue, kami sering menghadapi keperluan untuk cache beberapa data untuk meningkatkan prestasi atau menyimpan data ke storan tempatan. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan caching data dan storan setempat serta memberikan contoh kod khusus.

1. Caching data

Caching data boleh mengurangkan permintaan rangkaian dan meningkatkan pengalaman pengguna dan prestasi aplikasi. Vue menyediakan cara mudah untuk cache data, menggunakan sifat yang dikira.

Pertama, tentukan atribut data yang perlu dicache dalam komponen Vue:

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

Kemudian, dapatkan dan kembalikan data yang perlu dicache dalam atribut yang dikira:

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;
    }
  },
},

Dalam kod di atas, tentukan dahulu sama ada dicache data sudah wujud dalam localStorage Jika ya, data cache akan dikembalikan secara langsung jika tidak, permintaan rangkaian akan dihantar untuk mendapatkan data dan data yang diperoleh akan dicache dalam localStorage.

Gunakan sifat terkira ini dalam templat:

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

Dengan cara ini, setiap kali komponen dipaparkan, ia akan cuba mendapatkan data daripada cache dahulu, dan hanya menghantar permintaan jika tiada data dalam cache.

2. Storan data setempat

Kadangkala, kami ingin menyimpan data dalam storan setempat pengguna untuk tujuan storan berterusan atau berkongsi data merentas halaman. Vue menyediakan objek localStorage untuk melaksanakan penyimpanan data setempat.

Sangat mudah untuk menyimpan data menggunakan localStorage. Berikut ialah contoh yang menunjukkan cara menyimpan dan mendapatkan data yang disimpan secara setempat:

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

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

Dalam Vue, kami boleh menyimpan data yang perlu disimpan secara setempat ke dalam localStorage dan kemudian menggunakannya dalam sifat terkira komponen atau kaedah kitaran hayat.

Sebagai contoh, tentukan atribut data yang memerlukan storan setempat dalam komponen Vue:

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

Kemudian, dalam kaedah kitaran hayat komponen (seperti dicipta), dapatkan data daripada storan setempat dan tetapkan ia kepada atribut:

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

Pada masa ini, atribut nama pengguna komponen akan dimulakan kepada nilai dalam storan setempat.

Untuk membalas perubahan pengguna pada data, kami boleh menggunakan pilihan jam tangan untuk mendengar perubahan dalam atribut nama pengguna dan mengemas kini storan setempat apabila ia berubah:

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

Dengan cara ini, apabila pengguna mengubah suai nama pengguna, nilai dalam storan tempatan akan diubah sewajarnya.

Ringkasnya, Vue menyediakan kaedah yang mudah untuk melaksanakan caching data dan storan setempat, yang boleh dicapai melalui sifat yang dikira dan objek Storage setempat. Ini bukan sahaja meningkatkan prestasi aplikasi, tetapi juga membolehkan penyimpanan berterusan dan perkongsian data merentas halaman. Di atas adalah contoh kod khusus untuk menggunakan Vue untuk melaksanakan caching data dan storan setempat, saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Cara melaksanakan caching data dan storan setempat dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!