首页 > 其他分享 >Vue刷新页面VueX中数据清空了,怎么重新获取?

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

时间:2022-08-26 10:14:17浏览次数:86  
标签:Vue 数据 list state 清空 VueX store 页面

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

标签:Vue,数据,list,state,清空,VueX,store,页面
From: https://www.cnblogs.com/mochenxiya/p/16626616.html

相关文章

  • Vue——脚手架结构
    ├──node_modules├──public│├──favicon.ico:页签图标│└──index.html:主页面├──src│├──assets:存放静态资源││└──logo......
  • 解决Vuex刷新页面数据没缓存的问题
    监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStroage中。页面打开之后,判断sessionStorage中是否存在state对象,如果存在,则说明页面是被刷新过,将sessionStor......
  • Uncaught Error: Cannot find module './components/xxxx.vue'
    导入组件报异常,有可能两个原因:在组件文件中里面的exportdefault{name:"这里有时候忘记加双引号"}就会找不到该组件在vsCode编辑器中,对vue组件进行重命名,如testcom......
  • vue3 基础-生命周期函数
    在vue中,生命周期函数可理解为"在某个时刻,会自动执行的函数".先直观感受一下图示.一共就八个:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-......
  • vue admin template登录的问题
    版本:3.8.0,将其改为本地登录问题后台登录接口尚未开发,为了不影响系统其他接口的开发和测试工作,将vueadmintemplate改为本地登录。解决方案:手动配置token,将登录相关的......
  • 'vue-cli-service' 不是内部或外部命令,也不是可运行的程序
    问题解决方案删除node_modules文件夹执行npminstall下载依赖包npmrunserve运行......
  • vuex 的模块中如何调用 actions 中的方法
     模块vuexTest.js/***模块vuexTest.js*/exportdefault{namespaced:true,actions:{actionsHello(context,val){console.log(context,"context");//与s......
  • vue2 项目也想使用vite打包的便捷?
    首先很多项目正在更新迭代,vue2项目同学也知道vite打包速度开发模式飞快,而且生产模式我给大家贴个图这是vite构建的vue2的初始化项目性能这是未使用webpack构建的初始......
  • vue 百度地图定位
    具体引入上篇文章有提到div:<divclass="BaiDuMap"><baidu-mapclass="map-wrap":center="mapData.center":zoom="mapData.zoom"@ready="mapHandler"@cli......
  • Vue快速完成前后端开发的相关问题
    创建vue项目1.使用GUI界面创建Vue工程在DOS窗口下在指定目录下执行vueui,然后在http://localhost:8000页面下进行相关的配置即可。2.在DOS窗口下使用vuecreate项......