Vuex データの永続性を実装するためのアイデアとコード

Vuex データの永続性を実装するためのアイデアとコード

vuexとは

vuex: vue.js専用に開発された状態管理ツールで、すべてのコンポーネントの状態を集中的に保存します。

5 つの属性: 状態、ゲッター、ミューテーション、アクション、モジュール

基本的な使い方:

新しいstore.jsファイルを作成し、最終的にmain.jsに導入して実際の列にマウントします。

   'vue' から Vue をインポートします
   'vuex' から Vuex をインポートします
   Vue.use(Vuex)
   定数状態 = {}
   const ゲッター = {}
   const 変異 = {}
   定数アクション = {}
   デフォルトの新しいVuex.Storeをエクスポートします({
       州、
       ゲッター、
       突然変異、
       アクション
   
   })

状態属性: 保存したいデータなどの状態を保存します

ゲッター: 共有プロパティと同様に、this.$store.gettersを使用して状態に保存されているデータを取得できます。

ミューテーション: 状態を変更する唯一の方法は、ミューテーションを送信することです。this.$store.commit()

アクション: 状態を変更するためにディスパッチを通じて分散できるワンステップのミューテーション

Vuex データの永続性

ご存知のとおり、Vuex データはメモリに保存され、Web ページを更新するとこれらのデータは失われます。リフレッシュ後も一部のデータが保持されることを期待しており、そのためにはデータの保存が必要です。ここでは、localStorage を使用して Vuex でデータを永続化する記録を示します。

実装のアイデア

  • 状態内のデータは理論上はミューテーションによってのみ更新できるため、ミューテーション イベントをリッスンすることができます。各イベントが実行された後、この時点での状態データ全体を文字列に変換し、localStorage に格納します。
  • ページが状態を初期化するときに、localStorage 値を読み取り、それを JSON に変換し直して、現在の状態にマージします。
  • この方法は単純な実装であり、単純なオブジェクトにのみ適用できます。複雑なオブジェクトの場合、JSON に変換すると、対応するイベントとメソッドが失われる可能性があります。後で他の方法で保存することを検討できます。

コード

プラグイン:

エクスポートデフォルト(オプション = {})=> {
  const storage = options.storage || (window && window.localStorage);
  const key = options.key || "vuex";

  // 状態の値を取得する const getState = (key, storage) => {
    定数値 = storage.getItem(キー);
    試す {
      戻り値の型が "undefined" !== ? JSON.parse(value) : undefined;
    } キャッチ (エラー) {
      コンソールで警告します(エラー);
    }
    未定義を返します。
  };

  // 状態の値を設定する const setState = (key, state, storage) =>
    storage.setItem(キー、JSON.stringify(状態));

  戻り値 (保存) => {
    // 初期化中にデータを取得します。存在する場合は、元の vuex 状態を置き換えます。const data = Object.assign(store.state, getState(key, storage));
    if (データ) {
      データをストアに置き換えます。
    }

    // ストアの変更をサブスクライブします。ハンドラは各ミューテーションが完了した後に呼び出され、ミューテーションとミューテーション後の状態をパラメータとして受け取ります。store.subscribe((mutation, state) => {
      setState(キー、状態、ストレージ);
    });
  };
};

呼び出し方法:

"@/plugins/VuexPersist" から VuexPersist をインポートします。

エクスポートデフォルトcreateStore({
  プラグイン: [VuexPersist()],
});

要約する

Vuex のデータ永続性の実装に関するこの記事はこれで終わりです。Vuex のデータ永続性に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vuexサードパーティパッケージを使用してデータの永続性を実装する方法
  • vuex データの永続化のための 2 つの実装ソリューション
  • VUEX データの永続性、リフレッシュ後の再取得の例
  • Vuexはデータ状態の永続性を実装します
  • シンプルなvuex永続化ツールを実装する方法
  • vueの実践的な応用におけるvuexの永続性の詳細な説明

<<:  Linux の一般的なテキスト処理コマンドと vim テキストエディタ

>>:  case when文のエラー問題の詳細な説明

推薦する

クラウドデータ移行サービスの観点から見たMySQLの大規模テーブル抽出モードの原理分析

概要: MySQL JDBC 抽出にはどのような方法を使用すればよいでしょうか? その方法を説明しま...

Alibaba Cloud に Docker をインストールする際の問題と解決策

質問Alibaba Cloud イメージを使用して Docker をインストールすると、次の図に示す...

一般的な MySQL 関数の例の概要 [集計関数、文字列、数値、時刻と日付の処理など]

この記事では、よく使用される MySQL 関数について説明します。ご参考までに、詳細は以下の通りです...

React Hooksコンポーネント間で値を渡す方法の詳細な説明(tsを使用)

目次父から息子へ息子から父へクロスレベルコンポーネント(親から子孫)父から息子へpropsを通じて値...

img タグの src 属性値が空の場合の 2 つのリクエストの問題 (IE 以外のブラウザ)

img src 値が空の場合、リクエストが 2 つ行われます。一部の学生は以前に同様の状況に遭遇した...

MySQLを水平から垂直に、垂直から水平に変換する方法

データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...

HTMLセマンティクスと関連するフロントエンドフレームワークの詳細な分析

セマンティクスについて意味論は、記号やシンボルとそれらが表す意味との関係を研究する学問です。言語学で...

TomcatのmaxPostSize属性を設定する際に注意する必要がある問題を解決する

必要:近い将来、大容量ファイルのアップロード機能を実装します。フロントエンドフレームワークのアップロ...

Windows DNS サーバーに「ワームレベル」の脆弱性が露呈、17 年間存在

脆弱性の紹介SigRed の脆弱性はワーム化可能であるため非常に危険です。つまり、ユーザーの介入なし...

Linux で Docker を使用して MySQL をインストールする手順

テスターとして、学習プロセス中に Linux でソフトウェアをインストールする必要が頻繁にある場合が...

Linux サーバー上で nvidia-docker 環境を設定するプロセスの詳細な説明

Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...

フロントエンドに必要なNginx設定の詳細な説明

Nginx (エンジン x) は、軽量で高性能な HTTP およびリバース プロキシ サーバーであり...

JSはクリックドロップ効果を実装します

jsはクリックとドロップの特殊効果を実現します。まずは効果画像を見てみましょうさっそく始めましょう。...

MySQLデータベースのトランザクションとロックの詳細な分析

目次1. 基本概念酸3.自動コミット4. トランザクション分離レベル5. 同時実行の一貫性の問題6....

React プロジェクトにおける axios カプセル化と API インターフェース管理の詳細な説明

目次序文インストール導入環境の切り替え傍受を要求するレスポンスインターセプションAPIの統合管理要約...