解决$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倒计时页面跳转实例小结
Sep 11 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
javascript的数组和常用函数详解
May 09 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
微信小程序渲染性能调优小结
Jul 30 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防注入安全代码
2008/04/09 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
小程序云开发实战小结
2018/10/25 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python读写配置文件的方法
2015/06/03 Python
python获取list下标及其值的简单方法
2016/09/12 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
会计专业大学生职业生涯规划书
2014/02/11 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
入学申请自荐信范文
2014/02/26 职场文书
高中运动会前导词
2015/07/20 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
2019大学生实习报告
2019/06/21 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL