vue2:路由前置守卫无法获取到this.$store.state.xxx

news2024/11/20 3:30:29

在获取到vuex的数据时候,想在router目录下的index.js文件去获取到vuex仓库中声明的全局变量,但是通过this.$store.stote.xxx去获取的时候,报错提示:$store未定义

一、store/index.js
const store = new Vuex.Store({
  state: {
    // 属性:属性值
    LoginState: 0,
    userInfo: { // 用户信息
      userName: '张三'
    }
  }

(这里的数据只做举例)

二、router/index.js
router.beforeEach((to, from, next) => {
  // 获取到用户名信息
  const loginState = this.$store.state.userInfo.userName
  console.log(loginState)
  // next()
})

提示报错

三、解决方法

参考文档:vue2中,在路由守卫中this.$store获取vuex失败问题的解决(vue小技巧)(vue面试必会知识点) - 掘金 (juejin.cn)

其实也就是,导入vuex的仓库,然后用vuex去代替this.$store

1、在router/index.js顶部导入

import vuex from '@/store/index.js'

2、用vuex.state.xxx 代替 this.$store.state.xxx

  const loginState = vuex.state.userInfo.userName
  console.log(loginState)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1154949.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VScode clangd 插件浏览 linux 源码

文章目录 VScode clangd 插件浏览 linux 源码clangd 安装与配置VScode 插件安装clangd 安装方法一方法二 clangd 配置 cmake 生成bear 生成 compile_commands.json触发 clangd linux 内核脚本生成 compile_commands.json 文件三种方式对比 VScode clangd 插件浏览 linux 源码 …

外汇天眼:稳定盈利公式揭秘,想明白这个道理少走很多弯路!

所谓资金管理,简单的理解就是如何管好交易账户里的钱,或者说如何用好里面的钱,会更加贴切实际。 实践过程,资金管理最重要的环节应该是:不同行情下仓位的调节和止损的设置。 但据我所知,大多数人在资金管理…

心理测评测试H5小程序开源版开发

心理测评测试h5公众号字节微信小程序app开源版开发 探索心理奥秘,解读内心世界! 现在,我们为你带来一款独具特色的心理测评小程序——心理测评测试H5公众号字节微信小程序APP开源版开发! 这个强大而灵活的工具,将帮…

【AIFEM案例操作】电器盒谐响应分析

AIFEM是由天洑自主研发的一款通用的智能结构仿真软件,助力用户解决固体结构相关的静力学、动力学、振动、热力学等实际工程问题,软件提供高效的前后处理工具和高精度的有限元求解器,帮助用户快速、深入地评估结构的力学性能,加速产…

Flutter三棵树的创建流程

一、Flutter常见的家族成员 Widget常见的家族成员 Element常见的家族成员 Render常见的家族成员 二、示例代码对应的Flutter Inspector树 示例代码:MyApp->MyHomePage->ErrorWidget,包含了StatelessWidget、StatefulWidget、LeafRenderObjectWid…

hdlbits系列verilog解答(加减法器)-28

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 可以通过将其中一个输入变为负来从加法器构建加法器-减法器,这相当于将其输入反相然后加 1。最终结果是一个可以执行两个操作的电路:(a + b + 0) 和 (a + ~b + 1)。如果您想更详细地解释该电路的工作原理…

【小白专用】Mysql的安装配置教程(详细)

首先简单概述分为几个步骤: 一、下载Mysql 二、安装Mysql 三、验证Mysql安装是否成功 四、 配置环境变量 五、验证配置环境变量是否成功 一、下载Mysql 要在Windows或Mac上安装MySQL,首先从MySQL官方网站下载最新的MySQL Community Server版本&…

图形库篇 | EasyX | 图形绘制

图形库篇 | EasyX | 图形绘制 设置颜色 函数功能函数设置画线颜色void setlinecolor(COLORREF color)设置填充颜色void setfillcolor(COLORREF color) 设置画线颜色:void setlinecolor(COLORREF color) 具体功能:设置当前设备画线颜色返回值&#xff…

带IV的分组加密下密文分散存储且存在混淆密文片段的多项式时间解密方案

在使用带IV的分组加密模式下,考虑这样一个场景:分组加密后,每组密文都被分散保存,且在恢复的时候,每组密文会和n个混淆的密文一起提供,此时,若想完整的恢复明文,需要一个多项式时间的…

新手尝试硬件买单片机还是树莓派?

今日话题,新手尝试硬件买单片机还是树莓派?对于硬件初学者,建议首先学习单片机,如51单片机或STM32等。这些平台有丰富的学习资源和示例项目,程序相对简单,更贴近硬件,使初学者能够轻松入门&…

RecyclerView在点击事件的处理上也优于ListView

主要是细节的支持,ListView直接提供setOnItemClickListener,而RecyclerView没有,是因为RV考虑的更细节,比如我要点击条目上的某个图标生效,使用ListView会很难实现,但是RV实现会很容易,直接在适配器中由Vie…

财务管理系统 财务管理软件

财务管理系统 财务管理软件 系统功能介绍: 1、预算管理系统 预算管理是一个承上启下的业务衔接系统,主要用于记录本单位的年度预算指标数据,可以通过接口从财政年度预算数据中导入,也可以根据自身管理控制需要录入…

前端移动web详细解析四

移动 Web 第四天 01-vw适配方案 vw和vh基本使用 vw和vh是相对单位,相对视口尺寸计算结果 vw:viewport width(1vw 1/100视口宽度 ) vh:lviewport height ( 1vh 1/100视口高度 ) vw布局 vw单位的尺寸 px 单位数…

神经网络的解释方法之CAM、Grad-CAM、Grad-CAM++、LayerCAM

原理优点缺点GAP将多维特征映射降维为一个固定长度的特征向量①减少了模型的参数量;②保留更多的空间位置信息;③可并行计算,计算效率高;④具有一定程度的不变性①可能导致信息的损失;②忽略不同尺度的空间信息CAM利用…

Allegro如何恢复器件的丝印,位号

在用Allegro Layout的过程中,有时候会无意间删除掉器件的丝印,位号等,那怎么恢复呢? 被无意删除的电容丝印框,如下图。 首先点击菜单Place 点击Update Symbols...(更新器件) 跳出下面的对话框,找到对应的封装类型打勾。 然后下面四项打勾,然后点击恢复按钮即可。 恢复…

国标GB28181安防视频平台EasyGBS显示设备无法注册是什么原因?该如何解决?

国标GB28181协议视频平台EasyGBS,是基于国标GB28181协议的视频云服务平台,支持多路设备同时接入,并对多平台、多终端分发出RTSP、RTMP、FLV、HLS、WebRTC等格式的视频流。平台可提供视频监控直播、云端录像、云存储、检索回放、智能告警、语音…

三维场景视图加载cgcs2000坐标系数据

需求: 高程服务:2000坐标系 底图:天地图2000坐标系 三维模型:2000坐标系 效果图: 测试数据: 链接:https://pan.baidu.com/s/1cJbMfzkMalY06wOrmXStSQ 提取码:uz2a 高程服务…

Xcode中如何操作Git

👨🏻‍💻 热爱摄影的程序员 👨🏻‍🎨 喜欢编码的设计师 🧕🏻 擅长设计的剪辑师 🧑🏻‍🏫 一位高冷无情的编码爱好者 大家好,我是 DevO…

Tips:关于自己电脑重装python的流程

新换电脑,记录下安装python环境的流程。 1.先安装python 网上随便找教程 2.再安装pycharm https://blog.csdn.net/thefg/article/details/128881507?loginfrom_csdnhttps://blog.csdn.net/thefg/article/details/128881507?loginfrom_csdn3.再修改默认的pip为…

BI零售数据分析,告别拖延症,及时掌握一线信息

在日常的零售数据分析中,经常会因为数据量太大,分析指标太多且计算组合多变而导致数据分析报表难产,零售运营决策被迫拖延症。随着BI数据可视化分析技术的发展,智能化、可视化、自助分析的BI数据分析逐渐成熟,形成一套…