在vue中監聽storage的變化

2022-05-14 04:27:12 字數 579 閱讀 8319

1、首先在main.js中給vue.protorype註冊乙個全域性方法,其中,我們約定好了想要監聽的sessionstorage的key值為』watchstorage』,然後建立乙個storageevent方法,當我在執行sessionstorage.setitem(k, val)這句話的時候,初始化事件,並派發事件。

vue.prototype.resetsetitem = function

(key, newval)

}return

storage.setitem(key, newval);

}}

2、如何觸發

在乙個路由(比如路由a)儲存值得時候,使用下面的方法:

this.resetsetitem('watchstorage', this.value);

3、如何監聽

如果在另外乙個路由(比如路由b)中,我們想根據watchstorage的變化來請求介面重新整理頁面資料的時候,可以在這個路由中created鉤子函式中監聽:

window.addeventlistener('setitem', ()=>)

Vue 前端 Storage的封裝

前言 storage 是類似cookie 的東西 在vue專案的src 資料夾下新建storage index.js 檔案 index.js storage封裝 storage key 可以是任意值 const storage key mall export default else 獲取某乙個模組...

vue中監聽屬性

監聽屬性可以針對某個屬性進行監聽,當監聽的屬性的值發生了變化,則會執行相應的函式。監聽的函式要寫在vue的watch屬性中。doctype html html lang en head meta charset utf 8 meta name viewport content width devic...

Vue中監聽鍵盤事件

一,在vue中,已經為常用的按鍵設定了別名,這樣我們就無需再去匹配keycode,直接使用別名就能監聽按鍵的事件 keyup.enter function 屬性名 鍵值.delete delete 刪除 backspace 退格 tab tab.enter enter 回車 esc esc 退出 s...