vuex刷新页面没有数据的解决办法

在使用vuex的时候，刷新页面会出现数据没有出现，然后打印vuex中的state的数据却发现每次刷新结果都是null

vue构建的项目中，vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，问题来了，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，里面的数据就会恢复到初始化的状态。比如，用户已经登录了，我把登录状态放到state中了，一刷新页面，还要重新登录？购物车里的添加的数据，一刷新要重新添加？

第一种解决方法使用localStorage或者sessionStorage

监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。

在 app.vue中的created函数中写如下代码：localstorage和sessionStorage都可以

//在页面加载时读取sessionStorage里的状态信息

if (sessionStorage.getItem("store") ) {

this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))

}

//在页面刷新时将vuex里的信息保存到sessionStorage里

window.addEventListener("beforeunload",()=>{

sessionStorage.setItem("store",JSON.stringify(this.$store.state))

})

2.使用computed计算属性

	computed:{
		lists(){
			return this.$store.state.list;
		}
	},

1. 纯响应式，computed里面所用到的data一旦改变，整个computed的方法就回重新计算这个属性值

2. 计算结果会被缓存起来，方便下次使用，如果下次调用的时候，其中的数据没有发生变化，则不会重新计算。

所以我们要善用computed属性去解决实际开发

文章转载于：http://www.speedcode.cn/ArticleDetail?id=99