解决$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 相关文章推荐
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
Python 正则表达式操作指南
2009/05/04 Python
python和shell变量互相传递的几种方法
2013/11/20 Python
python 全局变量的import机制介绍
2017/09/07 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
python 图片去噪的方法示例
2019/07/09 Python
家长对老师的感言
2014/03/11 职场文书
党员实事承诺书
2014/03/26 职场文书
施工单位安全责任书
2014/07/24 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Python  lambda匿名函数和三元运算符
2022/04/19 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android