vuex清掉数据_解决vuex state数据刷新清空的几种方法
vuex state刷新配置的数据会刷新
作为一个vue小白,刚接触到vue,很多技术都是慢慢摸索着前行的。
1.最近要做一个前端,菜单和导航都要在json中配置,看了一天vue官网,发现可以在vuex中管理菜单和导航。
1 const state ={2 //菜单
3 menuList:[],4 //系统名称
5 systemName:'',6 //导航
7 navMenuList:[]8 }9
10 export default state
const mutations ={
setMenuList(state,data){
state.menuList=data
},
setSystemName(state,data){
state.systemName=data
},
setNavMenuList(state,data){
state.navMenuList=data
}
}
exportdefault mutations
然后在main.vue和navmenu.vue使用http分别获取了json,然后提交到mutation中。在computed计算属性中获取state中的值
computed:{
systemName:{
get(){return this.$store.state.systemName
}
},
menuList:{
get(){return this.$store.state.menuList
}
}
},
created() {
let menuUrl=this.HOST+'../../static/menu.json'
this.$http.get(menuUrl).then((response)=>{this.$store.commit('setMenuList',response.body.menuList)this.$store.commit('setSystemName',response.body.systemName)
})
}
computed: {
navMenuList:{
get(){return this.$store.state.navMenuList
}
}
},
created() {
let url=this.HOST+'../../../static/navmenu.json'
this.$http.get(url).then((response)=>{this.$store.commit('setNavMenuList',response.body.navMenuList)
})
}
这样写完之后,却发现刷新页面是有值的,但是在login登入的时候却没有值,所以在login.vue中的created中也commit了一下,才得到想要的结果。
如果只在login.vue中commit state的值,刷新页面后菜单和导航全部消失了
查了资料又看了官网,mutation是响应式的,导致刷新页面后仓库被清空了。
因为我不想既在父页面commit,又在子页面commit,这样太复杂了,就想找一种简单的方法
2.经过探索,发现src/main.js中的操作都是全局的,所以就在main.js的created中commit mutation,其他地方的commit都删掉了,
发现结果无论是login登陆还是刷新页面都能显示菜单和导航。
3.在网上查找资料的过程中,发现其他人的做法都是使用localstorage,因为这方面的只是不够,所以自己没有成功,
附上链接http://www.cnblogs.com/limengyi/p/6534435.html
还有一种方法是在router路由管理其中commit的,估计和我的第2种方法是一样的
4.缺点:
可能是增大了网络开销吧
vuex清掉数据_解决vuex state数据刷新清空的几种方法相关推荐
- arduino win10闪退_解决Win10天气应用闪退的两种方法
Windows系统中都自带天气应用,但是安装了Win10系统后,就发现,打开天气应用出现闪退的情况,其他应用都正常,这要怎么解决呢?下面小编告诉大家解决Win10天气应用闪退的两种方法. 方法一 1. ...
- 万圣节 数据_将万圣节特效带入WordPress网站的7种方法
万圣节 数据 Do you want to add Halloween effects to your WordPress site? Holidays are the perfect time to ...
- word涂改涂掉图片_怎么在word中修改图片的两种方法
有时我们插入的图片只有一部分是我们想要的,那就需要我们将这一部分裁剪出来,word本身就可以方便快捷的对图片进行裁剪,那么下面就由学习啦小编给大家分享下在word中修改图片的技巧,希望能帮助到您. 在 ...
- 清掉数据_学习之大数据项目笔记第七篇【数仓模块-日志预处理篇】
1 需求说明 1.1 清洗过滤 1)去除json数据体中的废弃字段(这是前端开发人员在埋点设计方案变更后遗留的无用字段): "email" "phoneNbr" ...
- python提交表单无效_使用Django Form解决表单数据无法动态刷新的两种方法
一.无法动态更新数据的实例 1. 如下,数据库中创建了班级表和教师表,两张表的对应关系为"多对多" from django.db import models class Class ...
- 在ML中缺乏数据可是个大问题,亲测有效的5种方法帮您解决
https://www.toutiao.com/a6701193162699833859/ 在我做过的很多项目中,公司虽然有非常棒的AI商业创意,但当他们意识到自己没有足够的数据时,却会慢慢的变得沮丧 ...
- PLSQL导出、导入数据 和 同步数据 以及 navicat 里同步数据 以及解决plsql导出数据乱码问题
PLSQL导出.导入数据 和 同步数据 以及 navicat 里同步数据 以及解决plsql导出数据乱码问题 1. 导出数据 1.1 导出.pde文件 1.2 导出sql文件 1.2.1 导出sql压 ...
- 解决transition动画与display冲突的几种方法
解决transition动画与display冲突的几种方法 参考文章: (1)解决transition动画与display冲突的几种方法 (2)https://www.cnblogs.com/ihar ...
- Database之SQLSever:SQLSever数据表管理(GUI法/SQL语句命令法两种方法实现建立表、修改表,以及增、删、改、查)之详细攻略
Database之SQLSever:SQLSever数据表管理(GUI法/SQL语句命令法两种方法实现建立表.修改表,以及增.删.改.查)之详细攻略 目录 一.两种方法建立表.修改表,插入多条数据记录 ...
最新文章
- netcore 图片 文件大小_NetCore 3.0文件上传和大文件上传的限制详解
- android布局共享,布局共享(如所有ACTIVITY拥有相同的布局部分,比如ACTIONBAR,在BASEACTIVITY中写入布局)...
- Btree(B-树)---C++
- clion 远程连接linux服务器 开发调试
- rgb红色范围_UI设计教程分享之RGB与CMYK色彩模式对比
- Android开发之LayoutInflater.from(context).inflate()方法参数介绍解决RecyclerView加载布局不全的问题
- 安装mysql二进制文件_MySQL二进制文件规范安装
- 【路径规划】基于matlab蚁群算法求解机器人栅格地图最短路径规划问题【含Matlab源码 1580期】
- LibModbus库开发笔记(一):libmodbus库介绍、编译和基础工程模板
- toshiba 共享文件夹_东芝打印机如何共享
- OFDM信号的产生与解调
- 【转载】国医大师熊继柏:用中医思维彻底把新冠病毒中医治疗方案说清楚!值得中医人收藏
- OriginPro中三维图片旋转
- persistence.cpp:2197:ann.xml(1): There should be space between attributes in function icvXMLParseTag
- Java8 lambda表达式详解
- android手机游戏-三国无双(二)
- Unix编程常见问题解答(精华)
- Java获取IPv4/IPv6地理位置-IP地址库
- 初学JAVA环境变量配置以及编译程序和运行
- 维吉尼亚加密算法 (C语言实现简单的加密算法) ------- 算法笔记007