从Vue3 ()初始化访问数据变量

Question

我试图在Vue3中使用一个下拉区域上传器，我是Vue2的老手，并且试图用这个新的反应性透明性来包装我的头脑。是否有人能简单地解释一下我如何可以从setup()方法访问数据变量，例如：

export default {
setup() {

    // const task_id = reactive({ task_id: 0 }); - thought I was onto something here, but no

    const url = "{your_url}";
    const saveFiles = (files) => {

      const formData = new FormData(); // pass data as a form
      for (var x = 0; x < files.length; x++) {
        formData.append("images[]", files[x]);
      }

    // Notice the use of task_id here, I would usually use this.task_id, but I 
    // understand that setup() is prior initialisation, but in my use-case I'm 
    // populating the task ID & then using the dropzone, so I need to know which 
    // task to upload to.

      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);
        });
    }; // End of saveFiles const.

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

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

      return {
        // task_id ?,
        getRootProps,
        getInputProps,
        ...rest,
      };
    },
  data() {    
    return {
      task_id: 0, // The unreachable
    }
  },
  ...

Answer 1

我通过引用在挂载方法上初始化的窗口变量来克服这个问题。

mounted() {
    window.vm = this;
}

然后，在setup()方法中：

function onDrop(acceptFiles, rejectReasons) {
    saveFiles(acceptFiles, window.vm.task_id);
}