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('watch stop……');
  }
 },

以上这篇vue之组件内监控$store中定义变量的变化详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vuejs监听vuex中值的变化的方法示例

    比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知. fruit-count-component.vue <template> <p>Fruits: {{ count }}</p> </template> <script> import basket from '../resources/fruit-basket' export default () { comput

  • 详解vuex 中的 state 在组件中如何监听

    详解vuex 中的 state 在组件中如何监听

    前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图

  • vue 获取及修改store.js里的公共变量实例

    html <input type='text' :value='num'> <button @click='add'> + </botton> js data(){ return{ } }, methods:{ add(){ this.$store.commit('add',1) } }, computed:{ num:function(){ // 因为要做修改 num 的值 所以放在 计算属性里 return this.$store.state.num } } sto

  • vuex state中的数组变化监听实例

    前言 首先,因为我有一个需求就是vue组件中有一组多选框,选中多选框的内容,要在另一个组件中进行视图更新,这个就设计的兄弟组件之间的通信了,兄弟组件之前通信我首先选用的vuex这个解决办法. 问题 vuex的state用来放数据,我就把数组放在了vuex中,然后设置了修改的函数.最终store.js中的代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { messArray:[] } c

  • 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

  • Python中的变量和作用域详解

    作用域介绍 python中的作用域分4种情况: L:local,局部作用域,即函数中定义的变量: E:enclosing,嵌套的父级函数的局部作用域,即包含此函数的上级函数的局部作用域,但不是全局的: G:globa,全局变量,就是模块级别定义的变量: B:built-in,系统固定模块里面的变量,比如int, bytearray等. 搜索变量的优先级顺序依次是:作用域局部>外层作用域>当前模块中的全局>python内置作用域,也就是LEGB. x = int(2.9) # int bu

  • 对Tensorflow中的变量初始化函数详解

    Tensorflow 提供了7种不同的初始化函数: tf.constant_initializer(value) #将变量初始化为给定的常量,初始化一切所提供的值. 假设在卷积层中,设置偏执项b为0,则写法为: 1. bias_initializer=tf.constant_initializer(0) 2. bias_initializer=tf.zeros_initializer(0) tf.random_normal_initializer(mean,stddev) #功能是将变量初始化为

  • JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一.定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下: function Sh

  • javascript中定义类的方法详解

    JS中定义类的方式有很多种: 1.工厂方式 复制代码 代码如下: function Car(){    var ocar = new Object;    ocar.color = "blue";    ocar.doors = 4;    ocar.showColor = function(){     document.write(this.color)    };    return ocar;   }   var car1 = Car();   var car2 = Car()

  • JAVA定义变量与输出详解

    JAVA定义变量与输出详解

    一些重要知识 一个源文件里只能有一个public类,其它类数量不限.文件名与public类名相同 JAVA程序严格区分大小写 JAVA应用程序的执行入口是main方法固定写法:public static void main(String[] args) java doc注释 / ** *xxxxxxxxx *xxxxxxxxx */ Java中的变量 1. 变量命名 变量不要与关键字重复,JAVA中没有const和goto语句,但也作被JAVA关键字保留,JAVA中的const叫final. 2

  • Vue.js 2.x之组件的定义和注册图文详解

    前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 模块化和组件化的区别 模块化:是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一 组件化:是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用 全局组件的定义和注册 组件Component是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 全局组件的定义和注

  • Vue子组件内的props对象参数配置方法

    Vue子组件内的props对象参数配置方法

    目录 一.简单数据类型 1.布尔类型 Boolean 正确写法 : 2.数字类型 Number 正确写法 : 3.字符串类型 String 正确写法 : 二.复杂数据类型 1.数组 Array 错误写法 : Eslint 语法报错 : 正确的常规写法 : 或是用 箭头函数 : 2.对象 Object 错误写法 : 正确的常规写法 : 3.函数 Function 正确写法 : 这篇文章主要介绍了Vue子组件内的props对象里的default参数是如何定义 Array.Object.或Functi

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

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

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

  • Vue中状态管理器(vuex)详解以及实际应用场景

    目录 Vue中 常见的组件通信方式可分为三类 Vuex简介 1. State 2. Getters 3. Mutations 4. Actions 5. 使用 mapState.mapGetters.mapActions 简化 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue中 provide.inject 详解及使用 Vue中

随机推荐