解决$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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
详解微信小程序开发用户授权登陆
Apr 24 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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php集成动态口令认证
2016/07/21 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
php创建类并调用的实例方法
2019/09/25 PHP
JavaScript 参考教程
2006/12/29 Javascript
json 实例详细说明教程
2009/10/31 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
python win32 简单操作方法
2017/05/25 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python2.7实现邮件发送功能
2018/12/12 Python
Python单元和文档测试实例详解
2019/04/11 Python
利用python开发app实战的方法
2019/07/09 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
环境保护建议书
2014/08/26 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
HDFS免重启挂载新磁盘
2022/04/06 Servers