Vue2 监听 store.getters.userid 变化并发送请求：简化代码示例

Vue2 监听 $store.getters.userid 变化并发送请求：简化代码示例

在 Vue2 开发中，我们经常需要监听 store 中某个数据变化，并进行相应的操作。本文将介绍如何监听 $store.getters.userid 的变化，并发送请求。

传统方法

created() {
  this.userId = this.$store.getters.userid;
  this.fetchData(); // 发送请求
},
watch: {
  '$store.getters.userid': function(newUserId) {
    this.userId = newUserId;
    this.fetchData(); // 发送请求
  }
},
methods: {
  fetchData() {
    // 发送请求的逻辑
  }
}

简化方法：立即监听和深度监听

created() {
  this.userId = this.$store.getters.userid;
  this.fetchData(); // 发送请求

  this.$watch(() => this.$store.getters.userid, (newUserId) => {
    this.userId = newUserId;
    this.fetchData(); // 发送请求
  }, { immediate: true, deep: true });
},
methods: {
  fetchData() {
    // 发送请求的逻辑
  }
}

代码解释：

1. this.$watch 方法可以监听任何表达式的变化。
2. () => this.$store.getters.userid 表达式用于监听 store.getters.userid 的变化。
3. immediate: true 表示立即执行一次监听回调，在组件创建时就执行一次。
4. deep: true 表示深度监听，即使 userid 是一个对象，只要对象内部的属性发生变化也会触发监听回调。

使用简化方法的好处：

• 代码更加简洁易读。
• 可以轻松实现立即监听和深度监听。
• 更灵活地监听各种数据变化。

希望本文能帮助您更好地理解在 Vue2 中如何监听 store 的数据变化，并发送请求。