需求：不同組件間共用同一數(shù)據(jù)，當(dāng)一個(gè)組件將數(shù)據(jù)發(fā)生變化時(shí)，其他組件也可以響應(yīng)該變化。
分析：vue無法監(jiān)聽localstorage的變化。localstorage主要用于不同頁(yè)面間傳值，vue適合組件間傳值。對(duì)于組件間共用同一數(shù)據(jù)又想保存住信息或者再頁(yè)面刷新的時(shí)候不丟失數(shù)據(jù)（vuex在頁(yè)面刷新的時(shí)候存儲(chǔ)的值會(huì)丟失，localstorage存儲(chǔ)在本地瀏覽器中），可以采用vuex+localstorage的方式。
關(guān)于vuex和storage的區(qū)別，可以參考（https://www.cnblogs.com/zifayin/p/7524805.html）
關(guān)于vuex參考文檔：http://vuex.vuejs.org/zh-cn/index.html
實(shí)現(xiàn)過程：以首頁(yè)展示用戶頭像信息，修改個(gè)人信息在公共組件頭部組件中為例，當(dāng)用戶修改個(gè)人信息時(shí)首頁(yè)的圖片實(shí)時(shí)變化，如果不對(duì)頭像信息做存儲(chǔ)更新，每次用戶修改完只有刷新頁(yè)面或者從其他頁(yè)面返回回來才能看到變化，即新設(shè)置的頭像信息，僅展示核心代碼。
1.首先先定義一個(gè)變量在state中。State負(fù)責(zé)存儲(chǔ)整個(gè)應(yīng)用的狀態(tài)數(shù)據(jù)，后期就可以使用this.$store.state直接獲取狀態(tài)。也可以利用vuex提供的mapState輔助函數(shù)將state映射到計(jì)算屬性中去。
const state = {
? imgInfo:null? //首頁(yè)頭像信息
}
2.mutations里面存儲(chǔ)localstorage的信息。Mutations可以更改狀態(tài)，本質(zhì)就是用來處理數(shù)據(jù)的函數(shù)，其接收唯一參數(shù)值state。定義的mutation必須是同步函數(shù)。this.$store.commit(mutationName)是用來觸發(fā)一個(gè)mutation的方法，或者使用輔助函數(shù)mapMutations直接將觸發(fā)函數(shù)映射到methods上，這樣就能在元素事件綁定上直接使用了。
export const SETIMGINFO = 'SETIMGINFO'
[SETIMGINFO] (state,info) {
? ? state.imgInfo=info
? ? localStorage.setItem('imgInfo',info)
? }
3.getter里面獲取localstorage的信息。有些狀態(tài)需要做二次處理，就可以使用getters。通過this.$store.getters.valueName對(duì)派生出來的狀態(tài)進(jìn)行訪問?；蛘咧苯邮褂幂o助函數(shù)mapGetters將其映射到本地計(jì)算屬性中去。
getImgInfo(state){
? ? ? if(localStorage.getItem('imgInfo')){
? ? ? ? state.imgInfo=localStorage.getItem('imgInfo')
? ? ? }
? ? ? return state.imgInfo
? }
4.在需要對(duì)storage進(jìn)行操作的頁(yè)面引用mapMutations函數(shù)
import {mapMutations} from 'vuex' ? ? ? ? ?//引入mapMutations
? ? ...mapMutations([ ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? 'SETIMGINFO'
? ? ? ]),
this.SETIMGINFO(this.imgInfo) ? ? ? ?//在需要的地方引用 mutations里面定義的方法
5.在需要獲取storage信息的頁(yè)面引用mapGetters輔助函數(shù)
import {mapGetters} from 'vuex'
computed:{
? ? ? ...mapGetters([ ? ? ? ??
? ? ? ? 'getImgInfo'
? ? ? ])
? ? },
watch:{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//動(dòng)態(tài)監(jiān)聽state的變化，實(shí)時(shí)改變頁(yè)面的數(shù)據(jù)
? ? ? getImgInfo: function(li) { ? ? ? ? ? ? ? //li就是改變后的state里面的imgInfo
? ? ? ? let vm = this;
? ? ? ? ? this.imgInfo=li ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//data聲明一個(gè)變量，在html引用。如果storage的值發(fā)生變化就實(shí)時(shí)刷新變量的值。
? ? ?}
? ? },
6.模板中對(duì)vuex的值的引用
<img :src="imgInfo?imgInfo:info.avatar"> ? ? ? ? ? ? ? ?//三元不等式，如果state發(fā)生變化有值就賦值給img標(biāo)簽，如果沒有即剛進(jìn)頁(yè)面就賦值給create生 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 命周期函數(shù)中從接口讀出來的數(shù)據(jù)
