详解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参考文档：

实现过程：以首页展示用户头像信息，修改个人信息在公共组件头部组件中为例，当用户修改个人信息时首页的图片实时变化，如果不对头像信息做存储更新，每次用户修改完只有刷新页面或者从其他页面返回回来才能看到变化，即新设置的头像信息，仅展示核心代码。

1.首先先定义一个变量在state中。State负责存储整个应用的状态数据，后期就可以使用this.$store.state直接获取状态。也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去。

2.mutations里面存储localstorage的信息。Mutations可以更改状态，本质就是用来处理数据的函数，其接收唯一参数值state。定义的mutation必须是同步函数。this.$store.commit(mutationName)是用来触发一个mutation的方法，或者使用辅助函数mapMutations直接将触发函数映射到methods上，这样就能在元素事件绑定上直接使用了。

3.getter里面获取localstorage的信息。有些状态需要做二次处理，就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。

4.在需要对storage进行操作的页面引用mapMutations函数

5.在需要获取storage信息的页面引用mapGetters辅助函数

6.模板中对vuex的值的引用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!