Vue 3 相当于 useEffect (React)

Posted 2023-03-16

【中文标题】Vue 3 相当于 useEffect (React)

【英文标题】：Vue 3's equivalent to useEffect (React)

【发布时间】：2022-01-01 10:21:45

【问题描述】：

这段代码可以运行，但我是 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>

【参考方案1】：

将immediate 标志添加到您的观察者。这样它就可以在挂载上运行，也可以在每次$store.state.list 更改时运行。

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

【讨论】：

或使用v3.vuejs.org/api/computed-watch-api.html#watcheffect

只是古玩，watchEffect 可以通过 Options API 访问吗？

应该是在一般领域而不是组合 API 中记录的那样