Vue ページ状態の永続化の詳細な説明

要件: 左のツリーと右のテーブル。組織ツリーでノードを選択した後、詳細ページに入り、戻ったときにそのノードを選択したままにします。他のクエリ条件でも状態を維持する必要があります。

アイデア: vuex と localStorage を組み合わせてデータをキャッシュします。ツリーノードまたはクエリボタンをクリックすると、データが vuex に保存され、localStorage にも保存されます。ページがロールバックすると、localStorage のデータが vuex に配置されます。ページコードでは、vuex にデータが保存されているかどうかを判断します。保存されている場合は、直接使用されます。保存されていない場合は、デフォルトで初期データが使用されます。ページナビゲーションルートがジャンプすると、キャッシュされたページデータはクリアされます。

コード：

ツリーノードをクリックすると、ID が vuex に保存されます。ディスパッチによるアクションのトリガー

this.$store.dispatch('SetDeviceFaultId', data.id)

vuexのアクションでは、コミットすることでミューテーションのメソッドをトリガーします。

RemoveDeviceFaultId({ commit }) { //commit('REMOVE_DEVICEFAULTID') は後でデータをクリアするために使用されます。
},
SetDeviceManageId({コミット}, id) {  
    コミット('SET_DEVICEMANAGEID', id);
},

mutations : データを変更する

REMOVE_DEVICEFAULTID: (状態) => {
      state.devicFaultId = null です     
      ストレージを削除します。
},
SET_DEVICEMANAGEID: (状態、デバイス管理ID) => {
      state.deviceManageId = デバイス管理Id
      ストレージを設定します('deviceManageId', deviceManageId);
}

state: ページが最初に作成されたときに localStorage からキャッシュされたデータを取得します

デバイス障害ID: Storage.get('デバイス障害ID'),

詳細ページに入り戻る

this.params.organizeId = this.$store.state.tree.devicFaultId ? this.$store.state.tree.devicFaultId : res.data[0].id;

他のルートをクリックするときは、キャッシュされたデータをクリアすることを忘れないでください

this.$store.dispatch('RemoveDeviceFaultId')

補充:

storage.jsコード

vuexに導入した後はStorage.setを通じて利用することができます

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。