ページを更新する vuex データが消えず、ページがジャンプしない問題 (詳細なチュートリアル)

この記事では主にvuexデータの消失とページ更新時のページジャンプを防ぐ方法を詳しく紹介し、参考として共有します。

最初に話させてください

vuex とルートインターセプトはしばらく取り組んできましたが、ついにそれから抜け出したので、それを共有したいと思います。基本的な紹介はありません。私はログイン状態ストレージの sessionStorage メソッドを使用しています。ストアを通じて一時的に保存され、プロジェクトを閉じると消えます。これは、コンピューターを再起動すると RAM に保存されていたデータが消えるのと似ています。ただし、sessionstorage、localstorage、cookie に保存されている内容は消えません

Vuex

メソッドとアイデア

まず、Vuex が特別に状態管理であることを公式 Web サイトで紹介しています。 Vue.js アプリケーション用に開発されたモードです。つまり、vuex のストア内のデータは一時的なものであり、ページが更新されて再ロードされるとすべてがクリアされ、2 回目のログインは行われません。そのため、vuex は常に空になるため、いくつかのメソッドが開発されました

1. sessionstorage (ページを閉じると消えます)、localstorage、cookie データはページが更新されても消えないため、要求されたすべてのデータを保存できます。それらに入れて使用時に取得します 2. vuex プラグインを使用します

3. ログイン時に、ページを更新する (ルート ジャンプ) ときにトークンとログイン ステータス (カスタマイズ) を割り当てます。 sessionstorageからステータスを取得してストアに割り当てます 悩んだ結果、方法3を選択しましたが、この方法はルーティングインターセプトを組み合わせて投稿する必要があります。ルーティング完了後のコード

code

index

actions

// 登录
 Login({ commit, state }, userInfo) {
  return new Promise((resolve, reject) => {
   login(userInfo).then(response => {
    let token = response.data.token;
    commit('SET_TOKEN', token);
    sessionStorage.setItem('token', token);  //获取到新的token的时候赋值给sessionStorage

    commit('SET_ISLOGIN', true);  // 登录成功修改store中的登录状态
    resolve()
   }).catch(error => {
    reject(error)
   })
  })
 },

ルーティング

簡単な紹介: ルートインターセプトは、ルートの「ライフサイクル」に相当します。異なる期間にメソッドを挿入します。この期間中に実行したいことを実行するには、router.beforeEach((to, from, next) => { // ... を使用します。具体的な内容は公式サイトに詳しく書いてあります

main.js

router.beforeEach((to, from, next) => {
 let isLogin = sessionStorage.getItem('isLogin');
 let token = sessionStorage.getItem('token');
 let id = sessionStorage.getItem('id');
 if (to.meta.requireAuth) {  // 判断是否有权限
  if (!store.state.isLogin && !isLogin && to.path !== '/login') {  // store和sessionStorage中登录状态都为false并且跳转到 不是登录的页面时 都强行跳转到登录页面  
   next({
    path: '/login',
   });
  } else if (!isLogin && to.path !== '/login') {  // 已经在登录页面进入首页的时候
   sessionStorage.setItem('isLogin', store.state.isLogin);
   next();
  } else if (isLogin && to.path !== '/login') {  // 登录进入后刷新页面时
   store.commit('SET_TOKEN', token);
   store.commit('SET_ISLOGIN', isLogin);
   store.commit('SET_ID', id);
   next();
  } else {
   next();
  }
 }
 else {
  next();
 }
});

pit

1. main.js ファイルにルートインターセプトを記述します。vue の上に記述する必要があることに注意してください。 mount (新しい Vue)

2. ログインをクリックするとき、アクションのログイン メソッドはルート インターセプトよりも前でなければなりません

3 . ログアウトしてログインするときに、sessionStorage 内の変数を削除することを忘れないでください

上記は皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

jsを使ってjsonを呼び出す方法

Nodejsでgm Croppingを使用して画像を合成する

babelの使い方のインストールと設定チュートリアル

以上がページを更新する vuex データが消えず、ページがジャンプしない問題 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。