Vue刷新页面VueX中数据清空了,怎么重新获取?

  • Vue刷新页面VueX中数据清空了,怎么重新获取?已关闭评论
  • 24 次浏览
  • A+
所属分类:Web前端
摘要

点击打开视频讲解更详细在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> 

srcstoreindex.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站一键三连哦!感谢支持!!!