Vuex刷新数据消失问题
问题产生的原因:
因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。
解决方案
所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session等浏览器提供的API中,可以将数据存储在硬盘上,做持久化存储。HTML5提供了2种在客户端存储数据的新方法:localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限。 之前,这些都是由cookie完成的,但\cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,使得cookie速度很慢,效率降低
解决方法是在获取到数据往 store 中存储时,利用window.localStorage.setItem 也存储一份相同数据。当在获取数据时判断存储的数据是否为空,若不为空直接获取,否则利用window.localStorage.getItem 来获取。
vue组件中:
this.$store.commit('setUserId', item.id)
window.localStorage.setItem('userId', JSON.stringify(item.id))
store中:
gette