Vue 3 相当于 useEffect (React)

Question

这段代码可以工作，但我是 Vue.js 的新手，我忍不住认为有一种更简洁的方法可以做到这一点。

我特别指的是在进入和更新（商店状态）时设置数据的部分，以防它是您访问（或重新加载）的第一页。我有一个商店，在网站加载时从后端获取数据，但这可能是显而易见的。

this.getTodo();当我从watch和打电话时，我只是觉得我在重复自己mounted。

<template>
  <div>
    <h2>Details Page</h2>
    {{ title }}
    {{ content }}
    {{ lastEditTime }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: '',
      lastEditTime: ''
    }
  },
  methods: {
    getTodo () {
      if (this.$store.state.list.length > 0) {
        const id = this.$route.params.id;
        const todoItem = this.$store.getters.getItem(id);
        Object.assign(this, todoItem);
      }
    }
  },
  watch: {
    '$store.state.list': {
      handler() {
        this.getTodo();
      }
    } 
  },
  mounted () {
    this.getTodo();
  }
}
</script>

Answer 1

为您的观察者添加immediate标志。这样它就可以在安装时以及每次$store.state.list更改时运行。

  watch: {
    '$store.state.list': {
      handler() {
        this.getTodo();
      },
      immediate: true
    } 
  }

更新：

正如@Thomas 所指出的，您还可以使用watchEffect：https ://v3.vuejs.org/api/compulated-watch-api.html#watcheffect