Vue 3 相当于 useEffect (React)

Question

这段代码可以运行，但我是 Vue.js 的新手，我不禁认为有一种更简洁的方法。

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

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

<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
    } 
  }