解决$store.getters调用不执行的问题


Posted in Javascript onNovember 08, 2019

api:https://vuex.vuejs.org/zh/guide/getters.html

场景:

在登录时将登录得到的用户信息存储在vuex的state和sessionStorage中。使用时在state中获取,当因为刷新等原因导致state中没有数据时,去sissionStorage中获取。

错误:

登录后,需要获取用户信息时,getters中属性的方法不会执行。只是去getters中获取缓存

解决方法:

将getters中的属性改写成方法,这样每次调用的时候就会执行,去从新获取数据。

getloginInfor: (state) => () => {}

代码:

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
 state: {
 /* 登录用户信息 */
 loginInfor: {
 }
 },
 mutations: {
 setloginInfor (state, msg) {
  state.loginInfor = msg
 }
 },
 actions: {
 
 },
 getters: {
 getloginInfor: (state) => () => {
  // 先从state里面获取用户登录信息
  let loginInfo = state.loginInfo
  // 如果 state 里面获取不到,那么从localStorage里面获取
  if (!loginInfo) {
  loginInfo = JSON.parse(sessionStorage.getItem('loginInfo'))
  }
  return loginInfo
 }
 }
})

使用:

this.$store.getters.getloginInfor()

钻研不易,转载请注明出处。。。。。。

以上这篇解决$store.getters调用不执行的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
js密码强度检测
Jan 07 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 #Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 #Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 #Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 #Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 #Javascript
Vue打包后访问静态资源路径问题
Nov 08 #Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 #Javascript
You might like
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python求素数示例分享
2014/02/16 Python
python绘制趋势图的示例
2020/09/17 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
初入社会应届生求职信
2013/11/18 职场文书
工艺工程师工作职责
2013/11/23 职场文书
捐赠仪式主持词
2014/03/19 职场文书
社团活动总结书
2014/06/27 职场文书
中秋节活动总结
2014/08/29 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
在职证明范本
2015/06/15 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android