序文プロジェクト内のフォーム フィルター項目では、選択後、ページを更新するとデータが変更され、選択したオプションでは保持されません。 ヒント:以下はこの記事の主な内容です。以下のケースを参考にしてください。 1. 理由:Vuex はグローバルなデータ状態管理メカニズムです。ストア内のデータは実行中のメモリに保存されます。ページが更新されると、ページは Vue インスタンスを再読み込みし、ストア内のデータは初期化された状態に再割り当てされます。 2. 解決策のアイデア:ローカルストレージで vuex を使用して、データを失うことなくページを更新する 1. ローカル保存方法:
拡張機能:Cookieの適用シナリオ(1)ユーザーがWebサイトにログインしたかどうかを判別し、次回ユーザーが自動的にログイン(またはパスワードを記憶)できるようにします。クッキーを削除した場合、ログインするたびに再度ログイン情報を入力する必要があります。 2. 実装手順:vueはシングルページアプリケーションなので、すべての操作は1ページで完了し、このプロジェクトは現在開いているプロジェクトでのみ使用されるため、sessionStorageを使用する方が適切です。
//store/selectData.js const state ={//状態データリストに格納されるデータ: { exchangeIdSum: null、 } } const 変異 = { setExchangeIdSum(state, data) { // 選択したデータを再割り当てし、sessionStorage に保存します state.dataList.exchangeIdSum = data sessionStorage.setItem('dataList',JSON.stringify(state.dataList)) } setDataList(状態、データ) { state.dataList = JSON.parse(JSON.stringify(データ)) } } 定数アクション = { resetDataList: ({コミット}, リスト) => { タイムアウトを設定する(() => { コミット('setDataList', リスト) }, 2000); } } エクスポートデフォルト{ 州、 突然変異、 行動、 } //フォームフィルタリングページでの操作メソッド: { exchangeChange(val){//ドロップダウンボックスが選択されているときに状態のデータを変更します。this.$store.commit('selectData/setExchangeIdSum', val) }, } //App.vue in create(){//ページに入るとすぐに、sessionStorage sessionStorage.getItem('dataList') にデータがあるかどうかを確認します。 this.$store.dispatch('selectData/resetDataList', JSON.parse(sessionStorage.getItem('dataList'))):{} } 3. 最適化:なぜなら、以前は状態データを変更するときに、各ミューテーションで sessionStorage を変更する必要がありましたが、変更する状態データが大量にある場合は、そのたびに sessionStorage が変更されることになり、少し面倒です。 解決する: これで、vuex とセッション ストレージ データを組み合わせて使用して、ページを更新するときにデータ損失が発生する問題を解決する方法についての説明は終了です。vuex セッション ストレージ データに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Nginxを使用してストリーミングメディアサーバーを構築し、ライブブロードキャスト機能を実現する
CJK は CJK Unified Ideographs の略称で、「中国語、日本語、韓国語の統一表...
目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...
具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...
バージョン: セントロス==7.2 jdk==1.8 合流==6.15.4 jira-ソフトウェア=...
1. インストールパッケージをダウンロードするインストール パッケージは次の場所にあります:参考:...
目次1. 組み込みオブジェクト2. 数学オブジェクト1. Mathオブジェクトの使用2. 指定された...
派生テーブルについてメイン クエリに派生テーブルが含まれている場合、または SELECT ステートメ...
目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...
0. 事前準備BIOS でセキュア ブートを無効にします。無効にしないと、サードパーティ ソースを...
Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...
この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...
Bashで配列を定義するbash スクリプトで新しい配列を作成する方法は 2 つあります。 1 つ目...
目次MySQLネイティブレプリケーションに基づくマスター-マスター同期ソリューションGaleraレプ...
1. redisイメージを検索する docker 検索 redis 2. Redisイメージをダウン...
空のリンク:つまり、ターゲット エンドポイントとのリンクはありません。フォーマット <a hr...