vuex ページを更新した後にデータを保存できない場合の対処方法

今回はvuexページ更新後にデータが保存できない場合の対処法を紹介します。vuexページ更新後にデータが保存できない場合の注意点は以下の通りです。見てみましょう。

1.原因

2.解決策

localStorageには、削除しない限り時間制限はありません。 .e. セッション、ブラウザが閉じているときセッションは終了し、時間制限があり、独自の Baidu があります

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

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 つのコンポーネントがデータ ソース (オブジェクトまたは配列) を共有している場合、コンポーネントの 1 つがデータ ソースを変更すると、それは問題になります。コンポーネントが変更に応答するとき、localstorage はそれを実行できないことが期待されています。その理由は違い 1 です。

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

推奨読書:

JS が 2 次元配列の行と列を変換する方法

redux-thunk の実践的なプロジェクト事例の詳細な説明

以上がvuex ページを更新した後にデータを保存できない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。