Is it plausible to utilize this method for sharing functionality (not data, which is handled by stores) in a Quasar and Vue3 application?
// boot/generic_stuff.js
import {boot} from 'quasar/wrappers'
const function_list = { /* content goes here */ };
export default boot(async ({app}) => {
app.provide('my_functions', function_list);
app.provide('my_api_key', 'abc-def');
});
Within my Vue component, I implement the following:
<template>
This is my api key: {{ my_api_key }}
</template>
<script>
import { inject } from "vue";
export default {
name: 'MyComponentsName',
setup() {
const $my_functions = inject('my_functions');
const $my_api_key = inject('my_api_key');
$myFunction.callToSomeFunction();
return {
my_api_key: $my_api_key
}
}
}
</script>
Would this approach be suitable if one aims to avoid importing numerous dependencies like Axios or functions needed across multiple scripts such as filters?