vuex结合localstorage动态监听storage的变化

需求：不同组件间共用同一数据，当一个组件将数据发生变化时，其他组件也可以响应该变化。

分析：vue无法监听localstorage的变化。localstorage主要用于不同页面间传值，vue适合组件间传值。对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据（vuex在页面刷新的时候存储的值会丢失，localstorage存储在本地浏览器中），可以采用vuex+localstorage的方式。

关于vuex和storage的区别，可以参考（https://www.cnblogs.com/zifayin/p/7524805.html）

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