Vue刷新页面VueX中数据清空了，怎么重新获取？
Vue刷新页面VueX数据清空了，怎么重新获取？
在vue中刷新页面后，vuex中的数据就没有了，这时我们要想使用就要重新获取数据了，
怎么在刷新后重新获取数据呢？？？
这时我们就可以写个公共的方法，在公共页面（可以是根页面）判断store仓库中数据是否为空，若为空的话，就可以重新请求接口，拉取数据。当然你也可以在每次使用数据前判断是否为空，若为空就重新请求数据，这样的话就时写的代码有的繁琐了。
但这其实存在一个小bug，就是在根页面我们拉取数据的时间段中，当前页面中正好使用的有要拉取的数据，但现在数据还在请求，store中数据为空啊，所以我们就拿不到数据了，等到请求完数据，我们当前页面也已经渲染完毕，所以数据还是拿不到的，这时我们就可以用watch监听store中数据的变化，这样的话，就不用怕拿不到数据了。
App.vue
<template>
<div id="app">
{{ getList }}
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
data(){
return {
}
},
created(){
},
mounted() {
this.getData()
this.handerList()
},
watch:{
// 方法一
getList(){
// this.handerList() //监听值变化后重新执行方法，获取数据
},
// 方法二
'$store.state.list'(newVal,oldVal){
console.log(newVal,oldVal) //监听值变化后获取数据
}
},
computed:{
getList(){
return this.$store.state.list
}
},
methods:{
handerList(){
console.log(this.getList)
console.log(this.$store.state.list)
},
getData(){
//@vuecli 中用axios请求本地json
axios.get('/menuList.json').then( res => {
this.$store.commit('increment',res.data.list)
})
}
}
}
</script>
<style scoped>
</style>
src\store\index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
list : []
},
mutations: {
increment (state,list) {
state.list = list
}
}
})
export default store;
