Passing VM (component instance) into effectScope

[MartinMalinda]

So there's the new effectScope API which is really nice and it could one issue for me in vue-concurrency. But for convenience, I'd need one extra little feature on top.

The effectScope is mainly created to be able to dispose of effects that are not bound to a particular component. But in my particular usecase I create an object (task) and this object later creates another objects with another effects. This can happen asynchronously (user interaction, XHR etc) and so at that point the computed and watch that are used are no longer assigned to current instance. I'd like to "force" that. I know that any such "subobject" (task instance) should still be bound to the parent object which is usually bound to the current component instance.

So in brief I'd like to do something like this:

const vm = getCurrentInstance();
const scope = effectScope({ vm });

// now I can do this whenever: (right away or even later, asynchronously)

scope.run(() => {
  const someNewReactiveObject = reactive({
    status: 'foo',
    isError: computed(() => someNewReactiveObject.status === 'error')
  });
});

At this point I'd expect

• that this scope would be disposed automatically when the vm is unmounted
• but I could still dispose of this scope earlier if I see fit (or if by any chance the vm is undefined)
• if I'd try to run on a scope that is disposed I'd get an error (maybe that happens already)

A very simplified example of what vue-concurrency is doing:

setup() {
 const task = reactive({
   instances: [],
   async perform(fn) {
     const taskInstance = reactive({
       value: null,
       error: null,
       status: computed(() => taskInstance.error ? 'error' : 'success')
     });
     this.instances.push(taskInstance);
     try {
      taskInstance.value = await fn();
     } catch (e) {
      taskInstance.error = e;
     }
   }
 });
}

As you can see here, the first reactive is created in setup. But the first second reactive with the one computed inside is created later in an async function, therefore these are no longer assigned to the current component instance and they probably outlive the component overall.

The same could could look like this with the patched effectScope:

setup() {
 const vm = getCurrentInstance();
 const scope = effectScope({ vm });
 const task = reactive({
   instances: [],
   async perform(fn) {
     scope.run(() => {
        const taskInstance = reactive({
        value: null,
        error: null,
        status: computed(() => taskInstance.error ? 'error' : 'success')
     });
     });
     this.instances.push(taskInstance);
     try {
      taskInstance.value = await fn();
     } catch (e) {
      taskInstance.error = e;
     }
   }
 });
}

Thanks for reading, any feedback appreciated 🙏

[posva]

Can you just use getCurrentInstance and onUnmounted?

[MartinMalinda]

@posva since these new computeds are created later asynchronously (XHR, user interaction) etc. getCurrentInstance returns null at that point. And if the current instance would still be active at that point I would have no issue at all.

[yyx990803]

This is unnecessary because inside setup(), the effectScope will be automatically tracked as a child scope of the component's scope unless you explicitly create it in detached mode.

[backbone87]

but not when running async code, maybe @MartinMalinda's proposal would also be a solution to the problems outlined in #234

[yyx990803]

If you create the effect scope synchronously at the start of setup(), it can be used later in async cases (it would still be bound to the owner component's scope).

[MartinMalinda]

@yyx990803 ahh that's great. I'll experiment with this and see, thanks!