Vue プロジェクトはリロードせずに保存されます

Vue.js は、開発者がインタラクティブな Web アプリケーションをより効率的に構築できるようにする、人気のあるフロントエンド フレームワークです。 Vue.js を使用してプロジェクトを開発する場合、状態を保存する必要があるが再読み込みしたくない状況によく遭遇します。この記事では、この目標を達成するためのいくつかのソリューションを紹介します。

1. ブラウザーのローカル ストレージを使用する

ブラウザーのローカル ストレージとは、ページが更新または再ロードされたときにデータを保持できるように、クライアントのローカル ブラウザーにデータを保存することを指します。 HTML5 では、localStorage と sessionStorage という 2 つの機能が提供されます。データをローカル ブラウザに保存でき、次のような特徴があります。

1. localStorage 保存されたデータには、クライアントが手動でクリアしない限り有効期限がありません。
2. sessionStorage 保存されたデータはセッションの終了時にクリアされます。つまり、ブラウザ ウィンドウまたはタブが閉じられると、保存されたデータもクリアされます。

Vue.js プロジェクトで localStorage メソッドを使用します:

1. データの取得:

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

2. ストレージ データ:

localStorage.setItem('key', data);

3. データの削除:

localStorage.removeItem('key');

2. Vuex の使用

Vuex は、Vue.js アプリケーションの状態管理パターンです。アプリケーションのすべてのコンポーネントの状態を一元管理し、状態の更新に一貫性があり、予測可能であることを保証するツールとルールを提供します。 Vuex を使用すると、データをグローバル状態で保存できるため、アプリケーション全体でデータにアクセスして更新できます。 Vue.js プロジェクトでこの目標を達成するには、次の手順を使用できます。

1. 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. コンポーネント内状態を保存する必要があるトリガー setData() メソッド:

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

3. 保存された状態にアクセスする必要があるコンポーネントでは、計算メソッドを使用して保存されたデータを取得します:

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

三、cookie の使用

Cookie は、クライアント側で状態を保存するためによく使用されるもう 1 つの方法です。 Cookie は通常、ユーザーの認証資格情報やその他の設定を保存するために使用されます。 Vue.js プロジェクトでは、Cookie を使用してデータを保存するには、次の手順を実行します。

1. Vue.js プロジェクトで js-cookie ライブラリを使用する:

npm install js-cookie --save

2. 状態を保存する必要があるコンポーネントに Cookie を設定します:

import Cookies from 'js-cookie';

Cookies.set('data', data);

3. 状態は他のコンポーネントからアクセスできます:

import Cookies from 'js-cookie';

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

4. IndexedDB を使用する

IndexedDB はブラウザによって提供されるネイティブ データベースであり、ブラウザ内に構造化データを保存できます。 Vue.js プロジェクトでは、次の手順で IndexedDB を使用できます:

1. myDatabase という名前の IndexedDB データベースを作成します:

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

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

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

2. 状態が必要な場合保存するコンポーネントで、データをデータベースに保存します:
#

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("数据写入成功");
  };
};

ログイン後にコピー

保存された状態にアクセスする必要があるコンポーネントで、データベースから保存データを取得します:

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'], 'readonly');
      
  var objectStore = transaction.objectStore('data');
  var request = objectStore.get('key');
      
  request.onerror = function(event) {
    console.log("数据读取失败");
  };
      
  request.onsuccess = function(event) {
    console.log(request.result);
  };
}

ログイン後にコピー
概要:
上記は、リロードせずに状態を保存する問題を解決するためのいくつかの方法です。開発者は、プロジェクトのニーズを実現するために適切な方法を選択できます。ブラウザーのローカル ストレージ、Vuex、Cookie、または IndexedDB のいずれを使用する場合でも、すべてが優れたソリューションです。ただし、場合によっては、これらの方法が特定のアプリケーション環境に適していない可能性があることに注意することが重要です。したがって、さまざまな方法を評価し、リロードせずに状態を保存する最適な方法を選択することが最善です。

以上がVue プロジェクトはリロードせずに保存されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。