龙空技术网

Vuex刷新数据丢失,怎么重新获取?

咬棒棒糖拽天下程序猿 125

前言:

眼前朋友们对“vuex怎么取数据”都比较关切,各位老铁们都需要了解一些“vuex怎么取数据”的相关资讯。那么小编在网络上搜集了一些有关“vuex怎么取数据””的相关内容,希望姐妹们能喜欢,看官们快快来了解一下吧!

Vuex刷新数据丢失,怎么办?_哔哩哔哩_bilibili

在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站一键三连哦!感谢支持!!!](Vue刷新页面后VueX中数据清空了,怎么重新获取?_哔哩哔哩_bilibili)

「链接」

标签: #vuex怎么取数据 #获取vuex中的数据