I created a custom "loading state" mixin specifically for Vue 2:
export default {
props: {
loading: {
type: Boolean,
default: false
},
},
data () {
return {
innerLoading: false,
}
},
mounted () {
this.innerLoading = !!this.loading
},
methods: {
startLoading () {
this.$emit('update:loading', this.innerLoading = true)
},
stopLoading () {
this.$emit('update:loading', this.innerLoading = false)
},
},
computed: {
isLoading () {
return !!this.innerLoading
},
isNotLoading () {
return !this.innerLoading
},
},
watch: {
loading (loading) {
this.innerLoading = !!loading
},
}
}
This mixin is used in various components to manage the loading state such as forms, buttons, and tables.
Now, I am looking to refactor this mixin into the composition API style for Vue 3. My goal is to utilize the loading composable like this:
// components/Table.vue
import 'useLoading' from 'src/composables/loading'
export default defineComponent({
setup () {
const { startLoading, stopLoading, innerLoading } = useLoading()
// ...
return { startLoading, stopLoading, innerLoading, ... }
}
})
My issue:
// How can I declare the loading prop within the setup() function?
props: {
loading: {
type: Boolean,
default: false
},
},
One approach is to define my component like this:
import 'useLoading' from 'src/composables/loading'
export default defineComponent({
props: {
loading: {
type: Boolean,
default: false
},
},
setup () {
const { startLoading, stopLoading, innerLoading } = useLoading();
}
})
However, if I have multiple components using this mixin/composable, it would be more efficient to declare the loading prop only ONCE (similar to how it was done in the mixin).
Is there a way to achieve this with the composition API?