Cara Membuat LocalStorage Reaktif di Vue

Sistem responsif Vue.js adalah salah satu kekuatan terasnya, tetapi ia mungkin merasa misteri kepada sesiapa yang tidak memahami mekanisme asasnya. Sebagai contoh, mengapa ia berfungsi dengan objek dan tatasusunan tetapi tidak dengan perkara lain seperti LocalStorage? Artikel ini akan menjawab soalan ini dan menunjukkan bagaimana untuk mendapatkan sistem responsif Vue untuk bekerja dengan LocalStorage.

Jika anda menjalankan kod berikut, anda akan mendapati bahawa kaunter dipaparkan sebagai nilai statik dan tidak akan berubah seperti yang dijangkakan kerana perubahan selang dalam localStorage:

 Vue baru ({
  EL: "#counter",
  data: () => ({
    Kaunter: localStorage.getItem ("kaunter")
  }),
  dikira: {
    Walaupun () {
      kembali ini.Counter % 2 == 0;
    }
  },
  Templat: `<div>
    <div>Kaunter: {{counter}}</div>
    <div>Kaunter adalah {{walaupun? 'walaupun': 'ganjil'}}</div>
  </div>`
});

 // some-other-file.js
setInterval (() => {
  const counter = localStorage.getItem ("counter");
  localStorage.setItem ("kaunter", kaunter 1);
}, 1000);

Walaupun harta counter dalam contoh VUE responsif, ia tidak berubah hanya kerana kita menukar sumbernya di LocalStorage.

Terdapat banyak cara untuk menyelesaikan masalah ini, dan cara terbaik adalah menggunakan VUEX dan menyimpan nilai -nilai yang disimpan diselaraskan dengan LocalStorage. Tetapi bagaimana jika kita hanya memerlukan penyelesaian semudah dalam contoh ini? Kita mesti mempunyai pemahaman yang mendalam tentang bagaimana sistem responsif Vue berfungsi.

Responsif dalam Vue

Apabila Vue memulakan contoh komponen, ia memerhatikan pilihan data . Ini bermakna ia akan melangkah ke atas semua sifat dalam data dan menukarnya kepada getter/setter menggunakan Object.defineProperty . Dengan menetapkan setter tersuai untuk setiap harta, VUE dapat mengetahui apabila harta itu berubah dan dapat memberitahu kebergantungan yang perlu bertindak balas terhadap perubahan tersebut. Bagaimanakah ia tahu kebergantungan mana yang bergantung kepada harta tertentu? Dengan memanfaatkan getters, ia boleh didaftarkan apabila sifat -sifat yang dikira, fungsi pemerhati, atau fungsi akses fungsi data.

 // teras/instance/state.js
fungsi initdata () {
  // ...
  Perhatikan (data)
}

 // Core/Observer/Index.js
fungsi eksport memerhati (nilai) {
  // ...
  Pemerhati Baru (nilai)
  // ...
}

Observer Kelas Eksport {
  // ...
  pembina (nilai) {
    // ...
    ini.walk (nilai)
  }

  berjalan (obj) {
    kekunci const = object.keys (obj)
    untuk (biarkan i = 0; i <kunci.length i definisi kunci><p> Jadi, mengapa LocalStorage tidak responsif? <strong>Kerana ia bukan objek dengan atribut.</strong></p>
<p> Tetapi tunggu. Kami tidak dapat menentukan getters dan setters dengan tatasusunan, tetapi di Vue, array masih responsif. Ini kerana tatasusunan adalah kes khas di Vue. Untuk mempunyai tatasusunan responsif, Vue menulis semula kaedah array di belakang tabir dan mengintegrasikannya dengan sistem responsif Vue.</p>
<p> Bolehkah kita melakukan sesuatu yang serupa dengan LocalStorage?</p>
<h3 id="Tulis-semula-fungsi-localStorage"> Tulis semula fungsi localStorage</h3>
<p> Pertama, kita dapat menetapkan contoh awal kita dengan mengatasi kaedah LocalStorage untuk mengesan contoh komponen yang meminta projek LocalStorage.</p>
<p> // peta antara kunci projek localStorage dan senarai contoh vue yang bergantung pada const storeItemSubscribers = {};</p>
<p> const getItem = window.localstorage.getItem; localStOrage.getItem = (Key, Target) => {Console.info ("GET", KEY);</p>
<p> // mengumpul contoh vue bergantung jika (! StoreItemSubscribers [key]) StoreItemSubscribers [key] = []; jika (sasaran) storeItemSubscribers [key] .push (sasaran);</p>
<p> // panggil fungsi asal kembali getItem.call (localStorage, kunci); };</p>
<p> const setItem = window.localstorage.setItem; localStorage.setItem = (kunci, nilai) => {console.info ("tetapan", kunci, nilai);</p>
<p> // Kemas kini nilai dalam contoh Vue yang bergantung kepada jika (StoreItemSubscribers [key]) {StoreItemSubscribers [key] .foreach ((dep) => {if (Dep.hasownProperty (key)) DEP [key] = value;}); }</p>
<p> // panggil fungsi asal setItem.call (localStorage, kunci, nilai); };</p>
<p> // ... (selebihnya kod adalah sama dengan teks asal)</p>
<p> Dalam contoh ini, kami telah mendefinisikan semula <code>getItem</code> dan <code>setItem</code> untuk mengumpul dan memberitahu komponen yang bergantung kepada projek -projek LocalStorage. Dalam <code>getItem</code> baru, kami merekodkan komponen yang meminta item mana, dan dalam <code>setItem</code> kami menghubungi semua komponen yang meminta item dan menulis semula sifat datanya.</p>
<p> Agar kod di atas berfungsi, kita perlu menyampaikan rujukan kepada contoh komponen untuk <code>getItem</code> , yang mengubah tandatangan fungsinya. Kita tidak boleh menggunakan fungsi anak panah lagi, jika tidak, kita tidak akan mempunyai nilai yang betul <code>this</code> .</p>
<p> Jika kita mahu berbuat lebih baik, kita perlu menggali lebih mendalam. Sebagai contoh, bagaimanakah kita dapat menjejaki kebergantungan tanpa lulus secara eksplisit?</p>
<h3 id="Cara-mengumpulkan-kebergantungan-di-vue"> Cara mengumpulkan kebergantungan di vue</h3>
<p> Untuk inspirasi, kita boleh kembali ke sistem responsif Vue. Kami telah melihat sebelum ini apabila mengakses harta data, getter harta data melanggan pemanggil untuk perubahan lagi kepada harta itu. Tetapi bagaimana ia tahu siapa yang membuat panggilan? Apabila kita mendapat atribut data, fungsi getternya tidak mempunyai input tentang siapa pemanggil. Fungsi getter tidak mempunyai input. Bagaimanakah ia tahu siapa yang akan mendaftar sebagai kebergantungan?</p>
<p> Setiap atribut data mengekalkan senarai kebergantungannya yang perlu bertindak balas dalam kelas <code>Dep</code> . Jika kita menggali lebih mendalam ke dalam kelas ini, kita dapat melihat bahawa apabila ketergantungan didaftarkan, kebergantungan itu sendiri telah ditakrifkan dalam pemboleh ubah sasaran statik. Matlamat ini ditetapkan oleh kelas <code>Watcher</code> misteri setakat ini. Sebenarnya, apabila sifat data berubah, pemerhati ini sebenarnya akan diberitahu bahawa mereka akan memulakan komponen semula komponen atau pengkomputeran semula sifat-sifat yang dikira.</p>
<p> Tetapi, sekali lagi, siapa mereka?</p>
<p> Apabila Vue membuat pilihan data yang dapat dilihat, ia juga mewujudkan pemerhati untuk setiap fungsi atribut yang dikira serta semua fungsi pemerhatian (yang tidak boleh dikelirukan dengan kelas <code>Watcher</code> ) dan fungsi rendering untuk setiap contoh komponen. Observer adalah seperti teman dengan fungsi ini. Mereka melakukan dua perkara utama:</p>
<ol>
<li> <strong>Mereka menilai fungsi pada masa penciptaan.</strong> Ini mencetuskan koleksi kebergantungan.</li>
<li> <strong>Apabila mereka diberitahu bahawa nilai yang mereka bergantung pada telah berubah, mereka mengubah fungsi mereka.</strong> Ini akhirnya akan mengira semula sifat-sifat yang dikira atau membuat semula keseluruhan komponen.</li>
</ol>
<p> Langkah penting berlaku sebelum pemerhati memanggil fungsi yang mereka bertanggungjawab: <strong>mereka menetapkan diri mereka sebagai sasaran dalam pembolehubah statik dalam kelas <code>Dep</code> .</strong> Ini memastikan bahawa apabila atribut data responsif diakses, mereka didaftarkan sebagai kebergantungan.</p>
<h3 id="Jejak-Siapa-yang-Memanggil-LocalStorage"> Jejak Siapa yang Memanggil LocalStorage</h3>
<p> Kita tidak boleh melakukan ini sepenuhnya kerana kita tidak dapat mengakses mekanisme dalaman Vue. Walau bagaimanapun, kita boleh menggunakan idea Vue untuk membiarkan pemerhati menetapkan sasaran dalam harta statik sebelum memanggil fungsi yang bertanggungjawab. Bolehkah kita menetapkan rujukan kepada contoh komponen sebelum memanggil LocalStorage?</p>
<p> Jika kita mengandaikan bahawa LocalStorage dipanggil apabila menetapkan pilihan data, maka kita boleh mengikat untuk <code>beforeCreate</code> dan <code>created</code> . Kedua -dua cangkuk ini dipecat sebelum dan selepas permulaan pilihan data, jadi kami boleh menetapkannya dan kemudian membersihkan pemboleh ubah sasaran dengan merujuk kepada contoh komponen semasa (kami boleh mengaksesnya dalam cangkuk kitaran hayat). Kemudian, dalam getter adat kami, kami boleh mendaftarkan sasaran ini sebagai kebergantungan.</p>
<p> Perkara terakhir yang perlu kita lakukan ialah menjadikan kitaran hidup ini sebahagian daripada semua komponen kami. Kita boleh melakukan ini menggunakan Global Mixin untuk keseluruhan projek.</p>
<p> // ... (selebihnya kod adalah sama dengan teks asal)</p>
<p> Sekarang, apabila kita menjalankan contoh awal, kita akan mendapat kaunter yang meningkatkan bilangan sesaat.</p>
<p> // ... (selebihnya kod adalah sama dengan teks asal)</p>
<h3 id="Akhir-percubaan-pemikiran-kita"> Akhir percubaan pemikiran kita</h3>
<p> Walaupun kami menyelesaikan masalah awal, ingatlah bahawa ini adalah eksperimen pemikiran. Ia tidak mempunyai beberapa ciri, seperti pengendalian projek yang dipadam dan contoh komponen yang dipasang. Ia juga mempunyai beberapa batasan, seperti nama harta contoh komponen perlu sama dengan nama projek yang disimpan di LocalStorage. Yang mengatakan, matlamat utama adalah untuk lebih memahami bagaimana sistem responsif Vue berfungsi di belakang tabir dan memanfaatkannya, jadi saya harap itulah yang anda dapatkan dari semuanya.</p></kunci.length>

Atas ialah kandungan terperinci Cara Membuat LocalStorage Reaktif di Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!