如何使用vuex結合localstorage動態監聽storage變化

這次帶給大家如何使用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對應到計算屬性中去。

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生命周期函数中从接口读出来的数据

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS實作雪花飄落動畫步驟詳解

怎麼使用Vue canvas實作行動端手寫板功能

#

以上是如何使用vuex結合localstorage動態監聽storage變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！