分类目录归档:前端

Vue监听store中数据变化的两种方式


2023年4月09日 21:58:01   2,533 次浏览

方式一

在Vue中,我们可以使用watch选项来监听数据的变化。下面是一种监听$store.state.userInfo.Name的变化的方式:

watch: {
  "$store.state.userInfo.Name":{
    handler:function(newVal,oldVal){
      console.log(newVal,oldVal);
    }
  }
}

 

#方式二

computed: {
  isEdit () {
    return this.$store.state.userInfo.Name;  //需要监听的数据
  }
},
watch: {
  isEdit(newVal, oldVal) {
    console.log(newVal,oldVal);
  }
}

 

#区别

::: info 区别一:第二种方式是先通过计算属性时刻监测store的数据变化,从而触发isEdit的监听函数,明显需要多一步 区别二:如果监听store的数据是一个对象,第一种方式只需要加上深度监听,也可以实现数据的变化监听,而第二种方式却无法监听到store的对象数据变化 :::

#例如

#第一种方式

watch: {
  //此时我监听的是对象,当$store.state.userInfo.Name发生修改时,此时需要深度监听才能监听到数据变化
  "$store.state.userInfo":{
    deep:true,//深度监听设置为 true
    handler:function(newVal,oldVal){
      console.log("数据发生变化啦"); //修改数据时,能看到输出结果
      console.log(newVal,oldVal);
    }
  }
}

 

#第二种方式

computed: {
  isEdit () {
    return this.$store.state.userInfo;  //需要监听的数据
  },
},
watch: {
  isEdit(newVal, oldVal) {
    console.log("数据发生变化啦"); //修改数据时,看不到该输出结果,因为无法监听到数据的变化
    console.log(newVal,oldVal);
  }
}

 

Vue3.0 全局拦截器


2021年11月21日 11:13:02   1,538 次浏览

全局过滤器
如果在应用中全局注册了过滤器,那么在每个组件中用计算属性或方法调用来替换它可能就没那么方便了。取而代之的是,你可以通过全局属性以让它能够被所有组件使用到:

 // 在 main.js 中添加
const app = createApp(App) 
app.config.globalProperties.$filters = { currencyUSD(value) { return '$' + value } }

然后,可以通过这个 $filters 对象修正所有的模板,就像这样:

<template> <h1>Bank Account Balance</h1> <p>{{ $filters.currencyUSD(accountBalance) }}</p> </template>

"firstTimestamp": "2021-09-28T07:00:01Z",
"lastTimestamp": "2021-10-09T06:28:19Z",


将时间转换年月日 时分秒格式: 2021-10-09 15:58:18

vue返回上一页


2020年11月26日 13:01:21   1,315 次浏览
如何使用点击方式控制当前页返回到上一个路由页面:
查阅相关资料,返回上一目录用到的是 this.$router.go(-1); 将该方法些到返回按钮上,点击触发该方法;
具体代码如下:
1.在当前页面添加返回按钮
<!--返回按钮--> 
<div class="backTo" v-show="isShow"> 
    <span v-on:click="back">返回</span> 
</div>
2.在方法体内现价back方法
methods:{ 
  back(){ 
    this.$router.go(-1);
    //返回上一层 
  }, 
},
问题2:如何控制”返回键” 的显示和隐藏: 由于这里需要频繁的改变”返回键“的显示和隐藏,所以这里考虑用v-show
data() { 
  return { 
    isShow:false 
  } 
}
触发isShow 的值改变的事件应该是当前页面路由地址的改变,并且这里需要使用watch完成监控:
watch:{ 
  $route(now,old){ 
  //监控路由变换,控制返回按钮的显示 
  if(now.path=="/home/home"){ 
    this.isShow=false; 
  } else{ 
    this.isShow=true; 
    } 
  } 
}
这样,当页面处在主页下的时候,返回键自动隐藏掉,如果不是当前主页,就显示返回键
第二种方式:vue2.0返回上一页
@click="$router.back(-1)"

 

页面: