解决$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 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
js中url对象化管理分析
Dec 29 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
vue组件实现进度条效果
Jun 06 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
通过layer实现可输入的模态框的例子
Sep 27 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
默默小谈PHP&MYSQL分页原理及实现
2007/01/02 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
幼师专业求职推荐信
2013/11/08 职场文书
优秀实习生感言
2014/03/01 职场文书
协议书格式
2014/04/23 职场文书
电子信息工程自荐信
2014/05/26 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
大学团日活动总结书
2015/05/11 职场文书
医院员工辞职信范文
2015/05/12 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python