[Vuejs]-Vue3 / How to pass data from mixin setup() to component

by

1👍

✅

mixin.js

export const foo = new Foo()

Import (and use) foo anywhere in your app, including any setup() function:

import { foo } from './path/to/mixin'

The above uses the same instance everywhere. If you want to use different instances of foo in each separate component, mixin.js:

export const useFoo = () => new Foo()

Anywhere else:

import { useFoo } from './path/to/mixin'
const foo = useFoo()

However, take note the second approach creates a new intance of Foo() every time useFoo() is called. So once you called it, you must use foo in that component.
Calling useFoo() multiple times in the same component will generate multiple instances, unlike how you’d use useStore(), for example.

But, I’m wondering, why do you need a mixin in the first place? Why not use:

const foo = new Foo()

…in the components where you need it?
What are you trying to achieve? And, more importantly, why?

👤tao

Leave a comment