vue页面刷新vuex数据丢失解决

store.js

主要思路是

登录的时候把数据传到sessionStorage与state,记得传sessionStorage和取值都需要转json，否则是字符串

store.js存sessionStorage

mutations: {
    Login (state, res) {
      state.userInfo = res.data.data
      sessionStorage.setItem('userInfo', JSON.stringify(res.data.data))
    },
}

因为刷新时vuex会被刷新而sessionStorage不会，所以App.vue创建时检测一次sessionStorage是否为空

<script>
import store from '@/store'
export default {
  name: 'App',
  store,
  created () {
    // 刷新时vuex赋值
    if (sessionStorage.getItem('userInfo') !== '') {
      this.$store.commit('EventListener')
    }
  }
}
</script>

sessionStorage取值store.js

mutations{
    EventListener (state) {
      state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    }
}