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;
Vue刷新页面VueX中数据清空了,怎么重新获取?的更多相关文章
- [转]vue解决刷新页面vuex数据、params参数消失的问题
一般项目都会有一些逻辑需要传递值给另一个页面,那么有的时候就会出现一个问题:用户刷新了页面,诶?数据没了,参数错误.那么今天经过总结,解决了这个问题.我在最新的项目中,通过了一下几种情况进行传值: 1 ...
- 刷新页面vuex数据不消失和不跳转页面
先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与 ...
- 解决刷新页面vuex store中数据丢失的问题
**问题背景:**页面刷新后,vuex中的数据丢失.这是因为:js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的.进行刷新页面的操作,以前申请的内存被释放,重新加载脚本代码,变量 ...
- vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)
vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.
- 解决vue刷新页面以后丢失store的数据
刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新 ...
- vue主动刷新页面及列表数据删除后的刷新方法
在继刷新当前页面,重载页面数据那篇之后 那一篇 深入理解数据驱动 以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重. 1. 获取列表方法 2.重新获取数据 3.这样再次调 ...
- 关于Vue 刷新页面
前言 Vue 中是单页面,当然需要刷新数据咯 你一定遇到这样的需求::比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者 这个页面有个组件 ,但是这个组件里面的点击事件还是到当前页面 怎么就 ...
- vue进阶:vuex(数据池)
非父子组件传值 vuex 一.非父子组件传值 基于父子组件通信与传值实现非父子组件传值的示例关键代码: <template> <div> <!-- 学员展示 --> ...
- vue单页面应用中动态修改title
https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...
随机推荐
- gulp入门第一课你需要注意的
安装 1.首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp. npm install -g gulp 2.初始化项目. npm init 3.如果想在安装的时候把gulp写进项目p ...
- SAP 实例 4 CFW
*&---------------------------------------------------------------------* *& Report demo_cfw ...
- Volcano成Spark默认batch调度器
摘要:对于Spark用户而言,借助Volcano提供的批量调度.细粒度资源管理等功能,可以更便捷的从Hadoop迁移到Kubernetes,同时大幅提升大规模数据分析业务的性能. 2022年6月16日 ...
- React技巧之打开文件输入框
原文链接:https://bobbyhadz.com/blog/react-open-file-input-on-button-click 作者:Borislav Hadzhiev 正文从这开始~ 总 ...
- LeetCode. 812. 最大三角形面积
812. 最大三角形面积 鞋带公式 鞋带公式,用于计算任意多边形的面积,可用于计算三角形的面积 已知 ΔABC 三个顶点的坐标 A:(x1,y1). B:(x2,y2). C:(x3,y3) 对应的矩 ...
- Day03 HTML标记
文本标题 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题< ...
- Node.js精进(7)——日志
在 Node.js 中,提供了console模块,这是一个简单的调试控制台,其功能类似于浏览器提供的 JavaScript 控制台. 本系列所有的示例源码都已上传至Github,点击此处获取. 一.原 ...
- 广西省行政村边界shp数据/广西省乡镇边界/广西省土地利用分类数据/广西省气象数据/降雨量分布数据/太阳辐射数据
数据下载链接:数据下载链接 广西壮族自治区,地处中国南部,北回归线横贯中部,属亚热带季风气候区.南北以贺州--东兰一线为界,此界以北属中亚热带季风气候区,以南属南亚热带季风气候区. 数据范围:全 ...
- Cisco Packet Tracer Student(思科网络模拟器)模拟搭建VLAN网络
一.VLAN简介 VLAN指在同一个物理网段内,通过逻辑手段,将其划分出多个虚拟的局域网,每个虚拟局域网都具备和真实局域网一样的功能.VLAN不受物理位置限制,可以灵活划分,同一个VLAN内的主机之间 ...
- 【python】下载中国大学MOOC的视频
[python]下载中国大学MOOC的视频 脚本目标: 输入课程id和cookie下载整个课程的视频文件,方便复习时候看 网站的反爬机制分析: 分析数据包的目的:找到获取m3u8文件的路径 1. 从第 ...