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

Vue 3 相当于 useEffect (React)

Vue 3's equivalent to useEffect (React)

state

store

reactjs

use-effect

vuejs3