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

来源:http://www.chinese-glasses.com 作者:Web前端 人气:148 发布时间:2020-03-31
摘要:时间: 2019-10-22阅读: 149标签:刷新一、页面刷新时,如何保持原有vuex中的state信息 需求:不同组件间共用同一数据,当一个组件将数据发生变化时,其他组件也可以响应该变化。 页面刷

时间: 2019-10-22阅读: 149标签: 刷新一、页面刷新时,如何保持原有vuex中的state信息

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

页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决。

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

1、localstorage

关于vuex和storage的区别,可以参考(https://www.cnblogs.com/zifayin/p/7524805.html)

可以使用 localstorage 来保存信息。

关于vuex参考文档:10bet,http://vuex.vuejs.org/zh-cn/index.html

【在某组件中添加如下钩子函数。比如 App.vue中】created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到localStorage里 window.addEventListener("beforeunload",()={ localStorage.setItem("store",JSON.stringify(this.$store.state)) })}注: this.$store.replaceState() 用于替换 store 的信息(状态合并)。 Object.assign(target, ...source) 将source的值 赋给 target,若有重复的数据,则覆盖。其中...表示可以多个source。 JSON.stringify() 用于将对象转为 JSON JSON.parse() 用于将 JSON 转为对象

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

注意: 若有两个组件,当调用 localstorage 的值,可能会出现问题。 如下图,Main.vue 中 每次刷新页面会 触发 localstorage 操作。 开始 localstorage 中没值,某用户通过 Login.vue 组件 进入 Main.vue 组件并刷新页面后,localStorage 会记录当前用户相关的 state 信息。 直接在浏览器中切换路径到Login.vue。当另外一个用户通过 Login.vue 并进入 Main.vue 时,此时获取的就是上一个用户的信息,这样肯定会出问题(我遇到的一个坑,大致意思就是这样)。

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

一个暴力的解决思路,在Login.vue中 直接将上一个用户缓存的信息给删除。此时 localStorage 没有了上个用户的信息。

const state = {

【Login.vue】created() { // 进入画面前,移除主页面保存的 state 信息 localStorage.removeItem("store")}然后只在Main组件刷新时 使用 localStorage 记录信息。【Main.vue】created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到localStorage里 window.addEventListener("beforeunload",()={ localStorage.setItem("store",JSON.stringify(this.$store.state)) })}

  imgInfo:null  //首页头像信息

2、sessionStorage

}

也可以使用 sessionStorage 来保存信息。

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

【在某组件中添加如下钩子函数。比如 App.vue中】created() { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload",()={ sessionStorage.setItem("store",JSON.stringify(this.$store.state)) })}

export const SETIMGINFO = 'SETIMGINFO'

3、localstorage 与 sessionStorage 的区别

[SETIMGINFO] (state,info) {

(1)localstorage 与 sessionStorage 都是客户端用于存储数据的。(2)localStorage是没有失效时间的,sessionStorage的声明周期是浏览器的生命周期。(3)当浏览器关闭时,sessionStorage的数据将清空,而localStorage数据只要不通过代码特意的删除或手动删除,是永久保存的。(4)若想清除localstorage 的数据。

    state.imgInfo=info

localStorage.removeItem(key) 清除一条数据localStorage.clear() 清除全部的数据

    localStorage.setItem('imgInfo',info)

原文:-y-h/p/11722007.html

  }

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

getImgInfo(state){

      if(localStorage.getItem('imgInfo')){

        state.imgInfo=localStorage.getItem('imgInfo')

      }

      return state.imgInfo

  }

本文由10bet发布于Web前端,转载请注明出处:vuex结合localstorage动态监听storage的变化

关键词:

最火资讯