vue-localStorageを書き換えます.setItemメソッドは、変動をリスニングし、リアルタイムで更新します.

1711 ワード

ローカルストレージの値が変更されたときにjsがリアルタイムで監視できない問題を解決

問題説明:jsでlocalstorageの値を取得しましたが、後期に変更される可能性があります.jsは一度だけ実行しても再び値を取得できません.もちろん、ページ取得をリフレッシュできますが、私たちのページではページをリフレッシュできません.この場合:

localStorageのsetItemメソッドを書き換えることができます.setItemメソッドを呼び出して新しい値を設定すると、new Event('setItemEvent')

になります.

しかし、インスタンス化された事件にすぎません.どうやって傍受しますか?

windowを使えます.dispatchEvent()この方法はwindowに傍受させるイベントを配布します.新しいインスタンスからのこのイベントはwindowにバインドされて呼び出しを傍受し、呼び出し時にsetItemの新しい値を取得することができ、直接値を割り当てることができます

具体的な実装

srcの下にutilsフォルダを新規作成し、toolsを新規作成します.jsは、dispatchEventStroageメソッド

//   setItem  ，   setItem   ，  ，window.dispatchEvent    
  dispatchEventStroage () {
    const signSetItem = localStorage.setItem
    localStorage.setItem = function (key, val) {
      let setEvent = new Event('setItemEvent')
      setEvent.key = key
      setEvent.newValue = val
      window.dispatchEvent(setEvent)
      signSetItem.apply(this, arguments)
    }
  }

を投げ出す

はmainです.jsにはグローバルに導入され、useされ、setitemEventがすぐに有効にならないという問題を解決するためにdispatchEventStroageメソッドを呼び出す

import Tools from '@/utils/tools'
Vue.use(Tools)
//     setItemEvent     ，          
Tools.dispatchEventStroage()

で使えます

リクエストを送信するたびにtokenフィールドを携帯する必要がある場合、tokenはlocalstorageに存在する場合がありますが、tokenが変更された場合、jsは変更されたことを知らないので、以上の方法が必要です.

const reqHeaders = {
  Accept: 'text/json',
  //           token，         token      
  token: localStorage.getItem('token') || ''
}
// window    localStorage setItem       
window.addEventListener('setItemEvent', function (e) {
  reqHeaders.token = e.newValue
})

VUE - MVVM - part6 - Array

関数を指すポインタを関数パラメータとして複数の関数の置換を実現