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文のエラー問題の詳細な説明

推薦する

XHTML 入門チュートリアル: XHTML タグ

XHTML タグの紹介<br />おそらく、前のセクションで、XHTML ファイルと通常...

JS ES6における構造化分解についてお話しましょう

概要es6 では、配列またはオブジェクトから指定された要素を取得する新しい方法が追加されました。これ...

Docker で Java 8 Spring Boot アプリケーションを開発する方法

この記事では、ローカル マシンに Java 8 をインストールせずに、Java 8 を使用して簡単な...

Linux リモート コントロール Windows システム プログラム (3 つの方法)

場合によっては、Windows システム上のプログラムを Linux 上でリモートで実行する必要があ...

プライベートイメージウェアハウスを構築するためのDockerレジストリの実装方法

マイクロサービスのイメージは、保存用に Docker リポジトリにアップロードされます。一般的に使用...

React における setState の同期または非同期の問題の理解

目次1. setState は同期的ですか?非同期ですか? 2. 非同期的に動作する1. React...

Ansibleを使用してTomcatをバッチでデプロイする方法

1.1 ディレクトリ構造の構築この操作は、nginx+mysql+tomcat+dbのディレクトリ構...

IE アドレスバーのアイコン表示問題を解決する 3 つの手順

<br />この Web ページ制作スキル チュートリアルは、Web サイトのアイコンを...

MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要

序文最近、古いプロジェクトから残ったいくつかの SQL 最適化の問題に対処するのに忙しくしています。...

JS を使用してバイナリ ツリー トラバーサル アルゴリズムのサンプル コードを実装する

目次序文1. バイナリツリー1.1. 二分木の走査1.2. jsを使用してバイナリツリーを表現する1...

MySQL 8.0 ウィンドウ関数の紹介と概要

序文MySQL 8.0 より前は、Oracle、SQL SERVER、PostgreSQL などの他...

静的ウェブサイトをRSSに変換するツール

<br /> この記事は allwebdesignresources.com から Ra...

MySQLデスクトップツールSQLyogのリソースとアクティベーション方法は、白黒のコマンドラインに別れを告げます

では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...

mysql5.6 以前のデータベースで json をクエリする方法

MySQLにデータを保存するとき、乱雑であまり使用されないデータがJSONフィールドに投げ込まれるこ...