解决$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 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
JS立即执行函数功能与用法分析
2019/01/15 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
python字符串与url编码的转换实例
2018/05/10 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python代码注释规范代码实例解析
2020/08/14 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
小学生班会演讲稿
2014/01/09 职场文书
合伙经营协议书
2014/04/18 职场文书
预防传染病方案
2014/06/14 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
大学班干部竞选稿
2015/11/20 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫