解决$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学习笔记9 prototype封装继承
Jan 11 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
Oct 17 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
九种原生js动画效果
Nov 11 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
vue-rx的初步使用教程
Sep 21 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
用PHP4访问Oracle815
2006/10/09 PHP
解决中英文字符串长度问题函数
2007/01/16 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
php socket通信简单实现
2016/11/18 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
python数据结构之图的实现方法
2015/07/08 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
python实现多人聊天室
2020/03/31 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
网络安全类面试题
2015/08/01 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
护士岗位职责
2014/02/16 职场文书
医学求职信
2014/05/28 职场文书
收款授权委托书
2014/10/02 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
个人先进材料范文
2014/12/30 职场文书
2015年会计年终工作总结
2015/05/26 职场文书