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; 

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！