Vuex刷新数据消失问题

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中：

getters: {
    loginIn: state => {
      let loginIn = state.loginIn
      if (!loginIn) {
        loginIn = JSON.parse(window.localStorage.getItem('loginIn') || null)
      }
      return loginIn
    },
}