方式一

在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);
  }
}

 

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

 // 在 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