登录后用户信息存储vuex，刷新数据丢失

结论：方法很多基本上都是要借助于localStorage或者sessionStroage来存放

①sessionStorage

　　刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制。

　　将接口返回的数据保存在vuex的store里，也将这些信息也保存在sessionStorage里。vuex中的变量是响应式的而sessionStorage不是，当改变vuex中的状态组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化。

　　还可以用 localStorage，但是它没有期限；所以常用的还是sessionStorage，当浏览器关闭时会话结束。

　　sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。

store.js

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: JSON.parse(sessionStorage.getItem('userData')),
  },
  getters: {
    userInfo: state =>{
      if(!state.userInfo){
        state.userInfo = JSON.parse(sessionStorage.getItem('userData'))
      }
      return state.userInfo
    },
  },
  mutations: {
    getUserInfo(state,data){
      state.userInfo = data
      sessionStorage.setItem('userData', JSON.stringify(data))
    },
  },
  actions: {
    getUserInfo(context){
      context.commit('getUserInfo')
    },
  }
})

login.vue

<template>
<div>
  <input v-model="username" type="text">
  <input v-model="password" type="text">
  <div @click="login">点击登录</div>
</div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
  data(){
    return {
      userInfo: null,
      username: '',
      password: '',
    }
  },
  methods: {
    ...mapMutations(['getUserInfo','getNum']),
    login(){
      this.userInfo = {
        name: this.username,
        age: this.password,
        roles: ['create', 'delete']
      }
      // sessionStorage
      sessionStorage.setItem('userData', JSON.stringify(this.userInfo));  
      // vuex
      this.getUserInfo(this.userInfo)
      this.$router.push({
        path: '/test'
      })
    },
    addNum(){
      this.getNum()
    }
  }
}
</script>

<style>

</style>

退出

oueLogin(){
      sessionStorage.removeItem('userData')
      this.getUserInfo(null)
      this.$router.push('/')
    }

②vuex-along

　　npm install vuex-along --save

③vuex-persistedstate

　　npm install --save vuex-persistedstate

④vuex-persist

　　npm install --save vuex-persist