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刷新页面VueX中数据清空了,怎么重新获取?的更多相关文章

  1. [转]vue解决刷新页面vuex数据、params参数消失的问题

    一般项目都会有一些逻辑需要传递值给另一个页面,那么有的时候就会出现一个问题:用户刷新了页面,诶?数据没了,参数错误.那么今天经过总结,解决了这个问题.我在最新的项目中,通过了一下几种情况进行传值: 1 ...

  2. 刷新页面vuex数据不消失和不跳转页面

    先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与 ...

  3. 解决刷新页面vuex store中数据丢失的问题

    **问题背景:**页面刷新后,vuex中的数据丢失.这是因为:js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的.进行刷新页面的操作,以前申请的内存被释放,重新加载脚本代码,变量 ...

  4. vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)

    vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.

  5. 解决vue刷新页面以后丢失store的数据

    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新 ...

  6. vue主动刷新页面及列表数据删除后的刷新方法

    在继刷新当前页面,重载页面数据那篇之后 那一篇 深入理解数据驱动 以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重. 1. 获取列表方法 2.重新获取数据 3.这样再次调 ...

  7. 关于Vue 刷新页面

    前言 Vue 中是单页面,当然需要刷新数据咯 你一定遇到这样的需求::比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者 这个页面有个组件 ,但是这个组件里面的点击事件还是到当前页面 怎么就 ...

  8. vue进阶:vuex(数据池)

    非父子组件传值 vuex 一.非父子组件传值 基于父子组件通信与传值实现非父子组件传值的示例关键代码: <template> <div> <!-- 学员展示 --> ...

  9. vue单页面应用中动态修改title

    https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...

随机推荐

  1. 使用 KubeKey 搭建 Kubernetes/KubeSphere 环境的"心路(累)历程"

    目录 今天要干嘛? 在哪里干? 从哪里开始干? 快速开干! 解决依赖问题再继续干! 如何干翻重来? 连着 KubeSphere 一起干! 干不过,输了. 重整旗鼓,继续干! 再次重整旗鼓,继续干! 一 ...

  2. Anaconda新建虚拟环境并添加到Jupyter Notebook

    可参考:https://www.jianshu.com/p/ab9ae548b253 虚拟环境是Python的隔离工作副本.这意味着每个环境都可以具有自己的依赖关系,甚至可以具有自己的Python版本 ...

  3. Node.js精进(2)——异步编程

    虽然 Node.js 是单线程的,但是在融合了libuv后,使其有能力非常简单地就构建出高性能和可扩展的网络应用程序. 下图是 Node.js 的简单架构图,基于 V8 和 libuv,其中 Node ...

  4. Python参数传递中的 args, kwargs

    概念 真正的Python参数传递语法是*和**,其被称为 被称为打包和解包参数.*args和**kwargs只是大家默认的一种形式.也可以写成*keys和**kkeys等其他形式.二者都是为了在不知道 ...

  5. Elasticsearch学习系列一(部署和配置IK分词器)

    Elasticsearch简介 Elasticsearch是什么? Elaticsearch简称为ES,是一个开源的可扩展的分布式的全文检索引擎,它可以近乎实时的存储.检索数据.本身扩展性很好,可扩展 ...

  6. vivo 容器集群监控系统架构与实践

    vivo 互联网服务器团队-YuanPeng 一.概述 从容器技术的推广以及 Kubernetes成为容器调度管理领域的事实标准开始,云原生的理念和技术架构体系逐渐在生产环境中得到了越来越广泛的应用实 ...

  7. javaEE-IDEA创建项目-使用Mybatis

    新建项目 点Next之后给项目命名 创建如下文件夹以及文件 修改pom.xml, 加入 <dependencies> <!-- junit单元测试 --> <depend ...

  8. 520到了,作为一个python程序员,必须整点肤白貌美的爬虫代码给你们~

    马上520就快到啦~ 整点好看的给你们看下~ 直接开搞~ 代码流程 模拟浏览器向服务器发送一个http请求,网站接收到请求后返回数据.在写爬虫代码的时候一定先要去模拟浏览器访问,因为现在的网站当接收到 ...

  9. 学习C4C的视频分享

  10. 解决方案:可以ping别人,但是别人不能ping我

    背景:我在写分布式爬虫项目时遇到了slave端无法ping通我的master,我的master可以ping通slave.我将master的防火墙关闭后slave可以ping了,但是这不是解决办法.于是 ...