詳解vuex結合localstorage動態監聽storage的變化
這篇文章主要介紹了詳解vuex結合localstorage動態監聽storage的變化，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
需求：不同元件間共用同一資料，當一個元件將資料發生變化時，其他元件也可以響應該變化。
分析：vue無法監聽localstorage的變化。localstorage主要用於不同頁面間傳值，vue適合元件間傳值。對於元件間共用同一資料又想儲存住資訊或者再頁面重新整理的時候不丟失資料（vuex在頁面重新整理的時候儲存的值會丟失，localstorage儲存在本地瀏覽器中），可以採用vuex+localstorage的方式。
關於vuex和storage的區別
1.最重要的區別：vuex儲存在記憶體，localstorage則以檔案的方式儲存在本地
2.應用場景：vuex用於元件之間的傳值，localstorage則主要用於不同頁面之間的傳值。
3.永久性：當重新整理頁面時vuex儲存的值會丟失，localstorage不會。
注：很多同學覺得用localstorage可以代替vuex, 對於不變的資料確實可以，但是當兩個元件共用一個數據源（物件或陣列）時，如果其中一個元件改變了該資料來源，希望另一個元件響應該變化時，localstorage無法做到，原因就是區別1。
關於vuex參考文件：http://vuex.vuejs.org/zh-cn/index.html
實現過程：以首頁展示使用者頭像資訊，修改個人資訊在公共元件頭部元件中為例，當用戶修改個人資訊時首頁的圖片實時變化，如果不對頭像資訊做儲存更新，每次使用者修改完只有重新整理頁面或者從其他頁面返回回來才能看到變化，即新設定的頭像資訊，僅展示核心程式碼。
1.首先先定義一個變數在state中。State負責儲存整個應用的狀態資料，後期就可以使用this.$store.state直接獲取狀態。也可以利用vuex提供的mapState輔助函式將state對映到計算屬性中去。
?| 1 2 3 4 |
const state = {
imgInfo:
null
//首頁頭像資訊
}
|
2.mutations裡面儲存localstorage的資訊。Mutations可以更改狀態，本質就是用來處理資料的函式，其接收唯一引數值state。定義的mutation必須是同步函式。this.$store.commit(mutationName)是用來觸發一個mutation的方法，或者使用輔助函式mapMutations直接將觸發函式對映到methods上，這樣就能在元素事件繫結上直接使用了。
?| 1 2 3 4 5 |
export const SETIMGINFO =
'SETIMGINFO'
[SETIMGINFO] (state,info) {
state.imgInfo=info
localStorage.setItem(
'imgInfo'
,info)
}
|
3.getter裡面獲取localstorage的資訊。有些狀態需要做二次處理，就可以使用getters。通過this.$store.getters.valueName對派生出來的狀態進行訪問。或者直接使用輔助函式mapGetters將其對映到本地計算屬性中去。
?| 1 2 3 4 5 6 |
getImgInfo(state){
if
(localStorage.getItem(
'imgInfo'
)){
state.imgInfo=localStorage.getItem(
'imgInfo'
)
}
return
state.imgInfo
}
|
4.在需要對storage進行操作的頁面引用mapMutations函式
?| 1 2 3 4 5 6 |
import {mapMutations} from
'vuex'
//引入mapMutations
...mapMutations([
'SETIMGINFO'
]),
this
.SETIMGINFO(
this
.imgInfo)
//在需要的地方引用 mutations裡面定義的方法
|
5.在需要獲取storage資訊的頁面引用mapGetters輔助函式
?| 1 2 3 4 5 6 7 8 9 10 11 12 |
import {mapGetters} from
'vuex'
computed:{
...mapGetters([
'getImgInfo'
])
},
watch:{
//動態監聽state的變化，實時改變頁面的資料
getImgInfo:
function
(li) {
//li就是改變後的state裡面的imgInfo
let vm =
this
;
this
.imgInfo=li
//data宣告一個變數，在html引用。如果storage的值發生變化就實時重新整理變數的值。
}
},
|
6.模板中對vuex的值的引用
?| 1 2 |
<
img
:src
=
"imgInfo?imgInfo:info.avatar"
>
//三元不等式，如果state發生變化有值就賦值給img標籤，如果沒有即剛進頁面就賦值給create生命週期函式中從介面讀出來的資料
|
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援指令碼之家。