vue data中如何获取使用store中的变量

目录
  • data获取使用store中的变量
  • 无法获取$store中的变量问题

data获取使用store中的变量

我们想使用定义在store中的全局变量,总是获取不到为空或是undefined,其实很简单:

比如我们调用后端接口时需要用到用户id,那么我们首先要获取store中定义的userId

方法如下:

1.这是store中定义的属性(我们获取用户id为例)

2.直接在想要使用的当前页面的computed中进行获取

3.然后就直接可以通过this.userid进行使用,比如我获取完之后为了验证一下在created中打印了一下,结果如下:

无法获取$store中的变量问题

需求是向后端传登陆用户的ID,写成this.$store.user.userID,

结果后端没收到,原来是少写了一个state

改为this.$store.state.user.userID后正常。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue执行方法,方法获取data值,设置data值,方法传值操作

    方法写在methods中 v-on:click="run()" @click="run()" 方法获取data中的数据通过this.数据获取 方法设置data中的数据通过this.数据=''设置 例如通过this.list=[1,2,3],设置list的值,让页面出循环list 可通过 @click="run('123')",将值传到方法中 可通过 @click="run($event)",将事件对象传到方法中,然后根据事件对

  • 在VUE style中使用data中的变量的方法

    最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了 如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写很多变量和模块class,那如果我的样式的值,可以从父组件,传到子组件,子组件根据传入值去渲染对应样式的值,其实就是要再style中使用data和props中的变量,这要怎么做呢? 其实很简单,只需要三步,大家来看: 1.HTML结构 <Upload ref="upload"

  • 在Vue mounted方法中使用data变量详解

    如下所示: data: { certificates: null }, mounted: function () { var __this = this; __this.certificates = getDictForkey("学历"); } 使用this对data中变量进行调用 vue生命周期参照官方:点击进入 vue渲染页面的时候,可能会对某些数据进行字典操作,比方性别,数据中是0和1,字典值是男和女,这个时候就需要在mounted进行"性别"字典的获取,然后

  • vue data中如何获取使用store中的变量

    目录 data获取使用store中的变量 无法获取$store中的变量问题 data获取使用store中的变量 我们想使用定义在store中的全局变量,总是获取不到为空或是undefined,其实很简单: 比如我们调用后端接口时需要用到用户id,那么我们首先要获取store中定义的userId 方法如下: 1.这是store中定义的属性(我们获取用户id为例) 2.直接在想要使用的当前页面的computed中进行获取 3.然后就直接可以通过this.userid进行使用,比如我获取完之后为了验证

  • Vue中如何获取json文件中的数据

    目录 场景 实现 场景 访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中, 现在在组件listcate.vue需要获取json数据. json文件内容: 文件位置: 实现 musictype.json { "currentType":[1,2,11,21,22,23,24,25] } listcate.vue <template lang="html"> <div> <ListCate_List v

  • vue绑定事件后获取绑定事件中的this方法

    使用$event传递参数(事件本身) <input v-model="checknames" @change="changecheckbox(item,$event)" style="float: right" type="checkbox" :value="index" > changecheckbox(val,element) { console.log( element.currentTa

  • Vue父组件如何获取子组件中的变量

    在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题. 之前有说过通过ref来让父组件操作子组件,并且传值,那么我们今天来详细看看. 案例一:点击父组件的按钮,操作子组件显示 注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用. 介绍:这里通过给子组件绑定ref属性,引号命名自定义,然后父组件通过 this.$refs.名字 就可以操作子组件的元素,以

  • SpringBoot如何获取application.properties中自定义的值

    目录结构: pom文件: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/

  • Vue Element前端应用开发之Vuex中的API Store View的使用

    概述 在我们开发Vue应用的时候,很多时候需要记录一些变量的内容,这些可以用来做界面状态的承载,也可以作为页面间交换数据的处理,处理这些内容可以归为Vuex的状态控制.例如我们往往前端需要访问后端数据,一般是通过封装的Web API调用获取数据,而使用Store模式来处理相关的数据或者状态的变化,而视图View主要就是界面的展示处理.本篇随笔主要介绍如何整合这三者之间的关系,实现数据的获取.处理.展示等逻辑操作. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管

  • vue中子组件的methods中获取到props中的值方法

    父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中 <template> <div> <head-top></head-top> <section class="data_section"> <header class="chart-title">数据统计</header> <el-row :gutter=&

  • vue之组件内监控$store中定义变量的变化详解

    // 1.采用计算属性来获取$store中的值 computed: { listenstage() { return this.$store.state.iShaveMsg; } }, // 2.通过watch来检查定义计算属性获取到的值的变化 watch:{ listenstage: function(ov,nv){ console.log('watch start--'); if(this.$store.state.iShaveMsg){ //业务处理 } } console.log('wa

  • vue data中的return使用方法示例

    目录 一.vue 里面的data return 是什么? 二.如何使用 1.vue 双向绑定 v-model 2.带有 ":"的属性 比如:class.:id等等 3. 标签使用return里面的属性 补充:vue中的data为什么会使用return函数 总结 一.vue 里面的data return 是什么? uniapp项目 vue 结构中data 里面的return详解 从字面上理解 data 是数据的意思 return是返回的意思,我个人理解的是 将数据返回出去. 二.如何使用

  • Vue自定义指令中无法获取this的问题及解决

    目录 自定义指令中无法获取this 解决方法 Vue使用this的这几个坑你都知道吗 一.普通函数 二.Vue中的this 自定义指令中无法获取this 问题 最近在使用自定义指令时遇到一个问题,我想在指令里通过this直接去访问vue实例数据,但是显示未定义,经大佬提醒,里面的this很可能不是指向vue实例 解决方法 在函数里增加第三个参数vnode,vnode.context就是指向当前的vue实例 总结 指令里的this不是指向vue实例,可以使用vnode.context获取this

随机推荐