解决$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 写的简单进度条控件
Jan 22 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
Vue中props的详解
May 16 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
在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
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
php之可变函数的实例详解
2017/09/13 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
loading动画特效小结
2017/01/22 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Django与JS交互的示例代码
2017/08/23 Python
对Python3中的input函数详解
2018/04/22 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python如何将多个PDF进行合并
2019/08/13 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
后勤主管工作职责
2013/12/07 职场文书
大学生求职自荐信
2013/12/12 职场文书
端午节活动策划方案
2014/03/09 职场文书
设备收款委托书范本
2014/10/02 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript