在开发过程中发现，Vuex 状态值存在页面刷新，数据丢失情况。

具体：在登陆页成功登陆，将用户信息保存到 Vuex，跳转至首页，首页显示用户信息，再刷新首页，vuex中保存的数据会丢失！

原因：store里的数据是保存在运行内存中的，当刷新页面，以前的内存被释放，重新加载脚本，store里面的数据就会被重新赋值。

解决方法：将state里的数据保存一份到本地存储。

在登陆页面传数据 设置 state 时，同时保存到 localStorage 中，然后在首页中做判断，如果刷新丢失，则取 localStorage 的值，再次设置 state！

index.vue

<template>
	<div>
		<p>Hello,{{userName}}</p>		
	</div>
</template>
<script>
	export default{		
		computed:{		
			userName() {
		        let localData = localStorage.userName;		       		   
		        if(this.$store.state.username===undefined){		        	
		          	this.$store.commit('setUserName',localData) 
		        }		       
		        return this.$store.state.userName
		     }
		}
	}
</script>

store > index.js 

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		user: {},
		userName: ""
	},
	mutations: {
		setUser(state, flag) {
			state.user = flag;
			state.userName = flag.username
			localStorage.setItem('userName', state.userName); 
		},
		setUserName(state, flag) {			
			state.userName = flag;
		}
	}
});
export default store