解决$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 高级语法介绍
Jun 15 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 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解析html的实现代码
2011/08/08 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
十个Python程序员易犯的错误
2015/12/15 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
对Python3中的input函数详解
2018/04/22 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
简单说下OSPF的操作过程
2014/08/13 面试题
2014年秋季开学典礼主持词
2014/08/02 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
律师授权委托书范本
2014/10/07 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers