ビジネス要件:Vue をベースに SPA プロジェクトを開発する場合、ページの更新後にデータが失われる問題を解決するために、通常はデータをローカルストレージまたはセッションストレージに保存します。データをグローバルに処理して均一に管理する必要がある場合は、Vue が公式に提供する vuex を使用してデータを均一に管理します。 localstorage や sessionstorage と比較すると、vuex はデータの保存においてより安全です。同時に、vuex にはいくつかの欠点もあります。ページが更新されると、vuex の状態に保存されているデータも更新されます。vuex に保存されているデータは永続化できず、vuex に保存されているデータ状態の永続性を維持するために監視処理が必要です。 ページが更新された後、vuex に保存されたデータの状態が永続化できないという問題を解決するために、私が採用した解決策は、サードパーティのプラグイン ツールを使用して vuex データの永続的な保存を実現し、ページが更新された後のデータ更新の問題を解決することです。 解決策 1: vuex-persistedstateプラグインをインストールする 糸にvuex-persistedstateを追加する // または npm install --save vuex-persistedstate 使い方 「vuex」からVuexをインポートします。 // プラグインをインポートします。 import createPersistedState from "vuex-persistedstate"; Vue.js で Vuex をビルドします。 定数状態 = {}; const 変異 = {}; 定数アクション = {}; 定数ストア = 新しい Vuex.Store({ 州、 突然変異、 行動、 /* vuex データ永続化設定 */ プラグイン: [ 永続状態を作成します({ // ストレージメソッド: localStorage、sessionStorage、cookies ストレージ: window.sessionStorage、 // 保存されたキーのキー値 key: "store", レンダリング(状態) { //保存するデータ: このプロジェクトでは、es6 拡張演算子を使用してすべてのデータを状態に保存します return { ...state }; } }) ] }); デフォルトストアをエクスポートします。 vuex でのモジュールデータの永続的な保存 /* モジュール.js */ エクスポートconst dataStore = { 州: { データ: [] } } /* ストア.js */ './module' から { dataStore } をインポートします。 const dataState = createPersistedState({ パス: ['データ'] }); 新しい Vuex.Store をエクスポートします({ モジュール: データストア }, プラグイン: [dataState] }); 注記:
解決策2: vuex-persistプラグインをインストールする 糸を追加する vuex-persist // または npm install --save vuex-persist 使い方 「vuex」からVuexをインポートします。 // プラグインをインポートします。 import VuexPersistence from "vuex-persist"; Vue.js で Vuex をビルドします。 // 初期化 const state = { ユーザー名:'admin' }; const 変異 = {}; 定数アクション = {}; // インスタンスを作成する const vuexPersisted = new VuexPersistence({ ストレージ: window.sessionStorage、 レンダリング:状態=>({ ユーザー名:状態.ユーザー名 // または...状態 }) }); 定数ストア = 新しい Vuex.Store({ 州、 行動、 突然変異、 //データ永続設定プラグイン: [vuexPersisted.plugins] }); デフォルトストアをエクスポートします。 プロパティメソッド
要約する上記の 2 つのソリューションにより、vuex データの永続的なストレージを実現できます。ソリューション 1 は実際の開発プロセスで使用したもので、ソリューション 2 は Github で見たものです。一般的に、どちらも当時の最終的なニーズを満たすことができ、参照用に該当するケースのデモがあります。比較すると、GitHub でのソリューション 1 の開始数はソリューション 2 の開始数よりも多くなっています。 実際の状況に応じて、あなたに合ったソリューションを選択してください。 これで、vuex データの永続性に関する 2 つの実装ソリューションに関するこの記事は終了です。vuex データの永続性に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu 19にTheanoをインストールする際の問題を解決する
>>: Python ベースの MySQL レプリケーション ツールの詳細な説明
プロジェクトでは https サービスを使用する必要があるため、Alibaba Cloud では無料...
React は、開発者が Web およびモバイルベースのアプリケーションを作成するために使用するオ...
MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...
コンピュータ ルームのサーバー上の mysql がしばらく実行されていたのですが、突然、再起動しても...
前書き: 以前、公式の nginx proxy_cache を CDN 静的キャッシュとして使用して...
1. <dl>はリストを定義し、<dt>はリスト内の項目を定義し、<d...
実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...
画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...
この記事では、ドロップダウンメニューを表示および非表示にするJavaScriptの具体的なコードを参...
序文ページの HTML 構造にネストされたボックスが多数含まれている場合、ページに複数の垂直スクロー...
目次まとめ問題の説明問題を分析する問題を解決するまとめ複雑な知識をシンプルに説明できることは重要です...
Tomcat は Java 言語をベースにした Web サーバー ソフトウェアです。この記事では主に...
<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...
目次docker システム df docker システム プルーンdocker systemc 情報...
序文json を使用したことがある人なら、オブジェクトを文字列化してからバックエンドに送信するのが一...