vuex ページの更新後にデータが消去されないようにする方法

今回は、vuex ページの更新後にデータが消去されないようにする方法と、vuex ページの更新後にデータが消去されないようにするにはどのような注意事項があるかを説明します。以下は実際的なケースです。見てみましょう。

1.原因

2.解決策

ローカルストレージには削除しない限り時間制限はありません

セッションストレージはセッションです。セッションはブラウザが閉じられると終了し、時間制限があり、独自の Baidu

ここで注意する必要があるのは、vuex の

変数 は応答しますが、sessionStorage は応答しないということです。 vuex で状態を変更すると、コンポーネントの変更は検出されますが、sessionStorage は検出されません。変更を確認するにはページを更新する必要があるため、コンポーネントが応答して変更できるように、vuex のステータスを sessionStorage から取得する必要があります。 3. 具体的な実装

アプリケーションのバックグラウンドは、ユーザーがログインした後に状態を保存し、終了後に状態を削除することです mutations.js

ADD_LOGIN_USER (state,data) { //登入，保存状态 
 sessionStorage.setItem("username", data); //添加到sessionStorage 
 sessionStorage.setItem("isLogin",true); 
 state.username=data,  //同步的改变store中的状态 
 state.isLogin=true 
 }, 
 SIGN_OUT (state) { //退出，删除状态 
 sessionStorage.removeItem("username"); //移除sessionStorage 
 sessionStorage.removeItem("isLogin"); 
 state.username=''  //同步的改变story中的状态 
 state.isLogin=false 
 }

getters.js

isLogin (state) { 
 if (!state.isLogin) { 
  state.isLogin=sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态 
  state.username=sessionStorage.getItem('username'); 
 } 
 return state.username 
 }

全体的な実装のアイデアは、 vuex のストーリーの状態は sessionStorage と一致します (sessionStorage 値から)

4. 後で言うと

以前は、vuex がコンポーネントを応答的に変更できることに気づきませんでした。 sessionStorage の値を直接取得するコンポーネントは、終了後にその効果を確認するために更新する必要があります。

追加:

vuex ストレージとローカル ストレージ (localstorage、sessionstorage) の違いを見てみましょう1. vuex はメモリに保存されますが、localstorage はファイルの形式でローカルに保存されます。

2. アプリケーションシナリオ: vuex はコンポーネント間で値を転送するために使用され、localstorage は主に異なるページ間で値を転送するために使用されます。

3. 永続性: vuex に保存されている値はページが更新されると失われますが、localstorage は失われません。

注: 多くの学生は vuex の代わりに localstorage を使用できると考えていますが、変更されていないデータの場合は確かに可能ですが、2 つのコンポーネントがデータ ソース (

object

または

array

) を共有する場合、コンポーネントの 1 つがデータを変更すると、 source で、別のコンポーネントを変更に応答させたい場合、localstorage ではそれができません。理由は違い 1 です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

Angular でページの部分印刷を実装する手順の詳細な説明

vue の共通コンポーネントの使用の詳細な説明

以上がvuex ページの更新後にデータが消去されないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。