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

在获取到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.userNameconsole.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.userNameconsole.log(loginState)

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI图像识别初次尝试

1.人形识别结果 2.代码 pythonOpenCVyolov3训练库,代码如下: #!/usr/bin/env python3 # -*- coding: utf-8 -*- import cv2 import numpy as np import osimgFiles["pic03.jpg", "pic04.jpg"]netNone classesNone colorsNonedef r…

Windows电脑怎么下载桌面便签小工具?

Windows电脑是日常办公中常用的工具,电脑上可以安装许多软件来辅助日常办公,其中桌面便签工具可以为大家记录很多日常办公中的各项工作计划,而且便签软件通常可以悬挂于电脑桌面显示,方便大家一边工作一边查看备忘记录。 谈及Win…

Python的web自动化学习(六)Selenium第一个网页操作

引言: 前面我们系统的介绍了一个各种selenium的工作原理、环境配置与准备、各种元素定位的方法,现在让我们一起来实践吧,以哔哩哔哩登录为例子说明: Selenium自动登录B站(通过QQ登录) 为什么使用qq登录&…

Mozilla Firefox 119 现已可供下载

导读Mozilla Firefox 119 开源网络浏览器现在可以下载了,是时候先看看它的新功能和改进了。 Firefox 119 改进了 Firefox View 功能,现在可以提供更多内容,如最近关闭的标签页和浏览历史,你可以按日期或网站排序,还支…

huggingface离线模式及默认保存路径

T5Tokenizer.from_pretrained()函数会在线下载huggingface上的模型,并自动保存在C盘的.cache路径下: C:\Users\xxxxx\.cache\huggingface\hub\models--google--t5-v1_1-base # 这里xxxxx代表自己电脑用户名huggingface离线下载 以google/t5-v1_1-base为…

Ubuntu18.04系统镜像制作

安装使用systemback # 添加源 sudo add-apt-repository --remove ppa:nemh/systemback sudo add-apt-repository "deb http://ppa.launchpad.net/nemh/systemback/ubuntu xenial main"# 下载 sudo apt update sudo apt install systemback打开systemback,点击创建li…

sql-50练习题16-20

sql-50练习题16-20 前言数据库表结构介绍学生表课程表成绩表教师表 1-6 检索"01"课程分数小于60,按分数降序排列的学生信息1-7 按平均成绩从高到低显示所有学生的所有课程的成绩以及平均成绩1-8 查询各科成绩最高分、最低分和平均分:以如下形式…

软件测试简历项目经验怎么写,没有项目经验?

怎么办?只能接受低薪工作吗?No No No。本文就教大家如何解决这个问题。 为了帮助大家彻底解决“没有项目”这个拦路虎,接下来文章将从以下几个方面进行展开: 1、应该去哪找项目? 2、在众多的项目中,该怎么…

RPC与HTTP的关系

首选理清楚关系 RPC与HTTP是两个不同维度的东西 HTTP 协议(Hyper Text Transfer Protocol),又叫做超文本传输协议,是一种传输协议,平时通过浏览器浏览网页网页,用到的就是 HTTP 协议。 而 RPC&#xff0…

C# OpenCvSharp Yolov8 Face Landmarks 人脸特征检测

效果 项目 代码 using OpenCvSharp; using OpenCvSharp.Dnn; using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace OpenCvSharp_Yolov8_Demo {public partial class frmMain…

Navicat连接postgresql数据库 -->华为云服务器

Navicat连接postgresql数据库 -->华为云服务器 2.开放服务器端口:54323.Navicat连接postgresql数据库 2.开放服务器端口:5432 1-1.选择安全组 1-2. 添加规则 1-3.开放5432端口规则 1-4.查看规则 3.Navicat连接postgresql数据库

GB28181协议怎样执行保活命令

前言 GB28181协议是视频监控领域的国家标准,本文将解析如何在FFmpeg中增加对GB28181协议的支持,使其可以与支持GB28181协议的设备进行通信与控制,实现设备的注册、保活以及流媒体的传输。 背景介绍 GB28181协议指的是国家标准GB/T 28181—…