I've been diving into the new composition-api within VueJS and have encountered a problem that I need help with. I am seeking advice on how to effectively tackle this issue. Previously, when everything was vuex-based, dispatching an action to another module was straightforward. However, I'm facing some challenges with the composition implementation.
Issue:
- Component invokes a function from CompositionA.
- CompositionA initiates a login function.
- Upon successful or failed response from CompositionA's login, I aim to call a function from CompositionB. (CompositionB contains data and logic for displaying a site-wide snackbar)
The challenge lies in having to inject the snackbar dependency into every component rather than having it instantiated/mounted from CompositionA. The current solution is as follows:
Component.vue:
// template calls login(credentials) method
import { useCompositionA } from '@/compositions/compositionA'
import { useCompositionB } from '@/compositions/compositionB'
export default {
name: 'Component',
setup(props, context) {
const { login } = useCompositionA(props, context, useCompositionB(props, context))
return {
login
}
},
}
compositionA.js:
export const useAuth = (props, context, snack) => {
const login = async (credentials) => {
try {
return await loginWithEmailPassword(credentials)
snack.show({text: 'Welcome back!'})
} catch (err) {
snack.show({text: 'Failed to login'})
}
}
return { login }
}
compositionB.js:
export const useSnack = (props, context) => {
const snack = reactive({
color: 'success',
text: null,
timeout: 6000,
visible: true,
})
const snackRefs = toRefs(snack)
const show = ({ text, timeout, color }) => {
snackRefs.text.value = text
snackRefs.timeout.value = timeout || 6000
snackRefs.color.value = color || 'success'
snackRefs.visible.value = true
}
return {
...snackRefs,
show
}
}
It would be convenient if something like the following existed, but I'm noticing that the properties are not reactive in CompositionB when used from CompositionA (the method is invoked but the snackbar doesn't appear). My understanding leads me to believe that Vue is not injecting CompositionB into the Component, resulting in another instance of CompositionB running inside CompositionA. Am I missing something here? What's the proper solution?
compositionA.js (not working):
import { useCompositionB } from '@/compositions/compositionB'
export const useAuth = (props, context) => {
const login = async (credentials) => {
const { show } = useCompositionB()
try {
return await loginWithEmailPassword(credentials)
show({text: 'Welcome back!'})
} catch (err) {
show({text: 'Failed to login'})
}
}
return { login }
}
Appreciate your insights,