詳解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映射到計算屬性中去。

const state = {
 imgInfo:null //首頁頭像信息

}

2.mutations里面存儲localstorage的信息。Mutations可以更改狀態，本質就是用來處理數據的函數，其接收唯一參數值state。定義的mutation必須是同步函數。this.$store.commit(mutationName)是用來觸發一個mutation的方法，或者使用輔助函數mapMutations直接將觸發函數映射到methods上，這樣就能在元素事件綁定上直接使用了。

export const SETIMGINFO = 'SETIMGINFO'
[SETIMGINFO] (state,info) {
 state.imgInfo=info
 localStorage.setItem('imgInfo',info)
 }

3.getter里面獲取localstorage的信息。有些狀態需要做二次處理，就可以使用getters。通過this.$store.getters.valueName對派生出來的狀態進行訪問。或者直接使用輔助函數mapGetters將其映射到本地計算屬性中去。

getImgInfo(state){
  if(localStorage.getItem('imgInfo')){
  state.imgInfo=localStorage.getItem('imgInfo')
  }
  return state.imgInfo
 }

4.在需要對storage進行操作的頁面引用mapMutations函數

import {mapMutations} from 'vuex' //引入mapMutations
 ...mapMutations([      
  'SETIMGINFO'
  ]),
this.SETIMGINFO(this.imgInfo) 
 //在需要的地方引用 mutations里面定義的方法

5.在需要獲取storage信息的頁面引用mapGetters輔助函數

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的值的引用

<img :src="imgInfo?imgInfo:info.avatar"> 
//三元不等式，如果state發生變化有值就賦值給img標簽，如果沒有即剛進頁面就賦值給create生命周期函數中從接口讀出來的數據

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。