Projek Vue menyimpan tanpa memuat semula

Vue.js ialah rangka kerja bahagian hadapan yang popular yang membantu pembangun membina aplikasi web interaktif dengan lebih cekap. Apabila membangunkan projek menggunakan Vue.js, kita sering menghadapi situasi di mana kita perlu menyimpan keadaan tetapi tidak mahu memuatkannya semula. Artikel ini akan memperkenalkan beberapa penyelesaian untuk mencapai matlamat ini.

1. Gunakan storan tempatan penyemak imbas

Storan tempatan penyemak imbas merujuk kepada menyimpan data dalam penyemak imbas tempatan pelanggan supaya data boleh dikekalkan apabila halaman dimuat semula atau dimuat semula. HTML5 menyediakan dua fungsi: localStorage dan sessionStorage. Mereka boleh menyimpan data dalam penyemak imbas tempatan dan mempunyai ciri-ciri berikut:

1. localStorage Data yang disimpan tidak mempunyai masa tamat tempoh melainkan pelanggan mengosongkannya secara manual.
2. Data yang disimpan dalam sessionStorage dikosongkan apabila sesi tamat, iaitu apabila tetingkap atau tab penyemak imbas ditutup, data yang disimpan juga dikosongkan.

Gunakan kaedah localStorage, dalam projek Vue.js:

1. Dapatkan data:

var data = localStorage.getItem('key');

2. Simpan data:

localStorage.setItem('key', data);

3. Padam data:

localStorage.removeItem('key');

2. Gunakan Vuex

Vuex ialah corak pengurusan keadaan untuk aplikasi Vue.js. Ia mengurus keadaan semua komponen aplikasi secara berpusat dan menyediakan alatan dan peraturan untuk memastikan kemas kini keadaan adalah konsisten dan boleh diramal. Menggunakan Vuex anda boleh menyimpan data dalam keadaan global supaya ia boleh diakses dan dikemas kini sepanjang aplikasi anda. Untuk mencapai matlamat ini dalam projek Vue.js, anda boleh menggunakan langkah berikut:

1. Buat fail store.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    data: null
  },
  
  mutations: {
    setData (state, payload) {
      state.data = payload;
    }
  },
  
  actions: {
    setData ({commit}, payload) {
      commit('setData', payload);
    }
  });

2. Dalam komponen yang perlu menyimpan keadaan Kaedah setData() dicetuskan dalam:

this.$store.dispatch('setData', data);

3. Dalam komponen yang perlu mengakses keadaan yang disimpan, gunakan kaedah yang dikira untuk mendapatkan data yang disimpan:

computed: {
  userData () {
    return this.$store.state.data;
  }
}

Tiga , menggunakan kuki

Kuki ialah satu lagi cara yang biasa digunakan untuk menyimpan keadaan di sisi pelanggan. Kuki biasanya digunakan untuk menyimpan bukti kelayakan pengesahan pengguna dan pilihan lain. Dalam projek Vue.js, menggunakan kuki untuk menyimpan data boleh dicapai melalui langkah berikut:

1. Menggunakan perpustakaan js-cookie dalam projek Vue.js:

npm install js-cookie --save

2. Tetapkan kuki dalam komponen yang perlu menyimpan keadaan:

import Cookies from 'js-cookie';

Cookies.set('data', data);

3. Keadaan boleh diakses daripada mana-mana komponen lain:

import Cookies from 'js-cookie';

var data = Cookies.get('data');

4. Gunakan IndexedDB

IndexedDB ialah pangkalan data asli yang disediakan oleh penyemak imbas dan boleh menyimpan data berstruktur dalam penyemak imbas. Dalam projek Vue.js, menggunakan IndexedDB boleh dicapai melalui langkah berikut:

1. Buat pangkalan data IndexedDB bernama myDatabase:

var request = window.indexedDB.open('myDatabase', 1);

request.onerror = function (event) {
  console.log("数据库打开失败");
};

request.onsuccess = function (event) {
  console.log("数据库打开成功!");
};

2. Apabila negara memerlukan untuk disimpan Dalam komponen yang perlu mengakses keadaan disimpan, dapatkan data yang disimpan daripada pangkalan data:

var request = window.indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.log("数据库打开失败");
};

request.onsuccess = function(event) {
  var db = request.result;
  var transaction = db.transaction(['data'], 'readwrite');
      
  var objectStore = transaction.objectStore('data');
  var request = objectStore.put(data, 'key');
      
  request.onerror = function(event) {
    console.log("数据写入失败");
  };
      
  request.onsuccess = function(event) {
    console.log("数据写入成功");
  };
};

3. >Ringkasan:

Atas ialah kandungan terperinci Projek Vue menyimpan tanpa memuat semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!