Vue3中如何从setup()方法访问data定义的变量？

在Vue3里，setup()的执行时机早于Options API的data初始化，而且setup内部的this并不是组件实例，所以没法像Vue2那样用this.task_id访问data里定义的变量。针对你的场景，有两种处理方式：

推荐方案：统一用Composition API定义响应式变量 #

把原来data里的task_id移到setup里，用ref定义成响应式变量，这样整个逻辑都在setup内，更符合Vue3的设计思路：

export default {
  setup() {
    // 用ref定义响应式的task_id，基本类型推荐用ref
    const task_id = ref(0);

    const saveFiles = (files) => {
      const formData = new FormData();
      for (let x = 0; x < files.length; x++) {
        formData.append("images[]", files[x]);
      }

      // 脚本里访问ref变量要加.value
      Nova.request()
        .post('/nova-vendor/plan-markers/upload-to-task/' + task_id.value, formData, { 
          headers: { "Content-Type": "multipart/form-data" } 
        })
        .then(response => {
          console.info(response.data);
        })
        .catch((err) => {
          console.error(err);
        });
    };

    function onDrop(acceptFiles, rejectReasons) {
      saveFiles(acceptFiles);
      console.log(rejectReasons);
    }

    const { getRootProps, getInputProps, ...rest } = useDropzone({ onDrop });

    // 把task_id返回，模板里可以直接用（不用加.value）
    return {
      task_id,
      getRootProps,
      getInputProps,
      ...rest,
    };
  },
  // 移除原来的data选项，避免重复定义
  ...
}

修改后，你在外部填充task_id时（比如父组件传值、接口请求赋值），直接给task_id.value赋值即可，saveFiles里能实时拿到最新的task_id。

备选方案：通过组件实例访问data变量（不推荐） #

如果因为业务限制必须保留data里的task_id，可以用getCurrentInstance()获取组件实例进而访问，但这个方法属于Vue3内部API，未来可能有变动，不建议生产环境大量使用：

import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const instance = getCurrentInstance();

    const saveFiles = (files) => {
      // 组件初始化完成后，能拿到data里的task_id
      const task_id = instance.data.task_id;

      const formData = new FormData();
      for (let x = 0; x < files.length; x++) {
        formData.append("images[]", files[x]);
      }

      Nova.request()
        .post('/nova-vendor/plan-markers/upload-to-task/' + task_id, formData, { 
          headers: { "Content-Type": "multipart/form-data" } 
        })
        .then(response => {
          console.info(response.data);
        })
        .catch((err) => {
          console.error(err);
        });
    };

    // 其他代码不变...
    function onDrop(acceptFiles, rejectReasons) {
      saveFiles(acceptFiles);
      console.log(rejectReasons);
    }

    const { getRootProps, getInputProps, ...rest } = useDropzone({ onDrop });

    return {
      getRootProps,
      getInputProps,
      ...rest,
    };
  },
  data() {    
    return {
      task_id: 0,
    }
  },
  ...
}

注意事项 #

• 尽量避免混用Composition API和Options API，会让代码逻辑分散，增加维护成本。
• ref定义的响应式变量，在模板中使用时不需要加.value，Vue会自动解包；但在脚本中必须加.value访问。

内容的提问来源于stack exchange，提问作者Grant