如何在计算属性更改时触发 Vue 方法

Question

本质上，在 Vue 应用程序中，我有一个列出联系人的页面。以及作为标题组件一部分的搜索表单。我将输入搜索项捕获为 vuex 存储中的状态变量，并将其作为计算变量进行跟踪。

我有一种方法来检索在已安装的挂钩中调用的联系人。每当状态搜索变量发生变化时，我想再次调用相同的 getContacts 方法。使用观察者来执行此 atm，但我读到观察计算值不是正确的方法。想知道是否有更好的方法来做到这一点。下面的脚本。

<script>
  import API from '@/utils/Api.js'

    ...

    export default ({
        ...
        tableData: [],
            }
        },
    computed: {
      search() {
        return this.$store.getters.search;
      }
    },
    mounted() {
      this.getContacts();
    },
    methods: {
      async getContacts() {
        try {
          const {data} = await API.get('/contacts?search=' + this.search)
          this.tableData = data
          } catch (e) {
          console.error(e)
        }
      }
    },

    watch: {
      search () {
        this.getContacts();
      }
    }
  })

</script>

Answer 1

尝试直接监视状态项，然后将新值作为方法的参数传递，然后使用 immediate:true 替换已安装的钩子调用：

  export default ({
        ...
        tableData: [],
            }
        },
    methods: {
      async getContacts(val) {
        try {
          const {data} = await API.get('/contacts?search=' + val)
          this.tableData = data
          } catch (e) {
          console.error(e)
        }
      }
    },

    watch: {
      '$store.getters.search': {
       handler(newVal)
        this.getContacts(newVal);
       },
        immediate:true
      }
    }
  })