解决$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 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
node.js制作一个简单的登录拦截器
Feb 10 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
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Django日志模块logging的配置详解
2017/02/14 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
物流管理专业职业生涯规划书
2014/01/06 职场文书
中学生期末评语
2014/02/03 职场文书
有关环保的标语
2014/06/13 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技