Global functions for all app ?

[Incremental]

Hello, I’m trying to declare a global function usable from all my app.
I created a boot file : boot/fonctions.js

import Vue from "vue";

function myFuncA(input) {
	result = input.concat(input);
	return result;
}

export default ({ Vue }) => {
	Vue.prototype.$myFuncA = myFuncA;
};
export { myFuncA };

and in a vue file :

import { myFuncA } from "boot/fonctions.js";

computed: {
	calc: function() {
		return this.$myFuncA(this.editedItem.nom);
	}

But at execution, in the developper tool, I get the error :
[Vue warn]: Error in render: “TypeError: this.$myFuncA is not a function”

What could be wrong ? Thanks

[metalsadman]

@incremental check if you have registered your boot file in your quasar.conf.js file’s boot array, also you don’t need to import it if you are using it in a component, this.$myFunc is enough.

[Incremental]

@metalsadman thanks, I missed the declaration in quasar.conf.js
In my template, now when I use {{ calc }} I get :
[Vue warn]: Error in render: “ReferenceError: assignment to undeclared variable result”

[dobbel]

@incremental

[Vue warn]: Error in render: “ReferenceError: assignment to undeclared variable result”

Maybe because result is missing let or const? Right now it is a global variable…

result = input.concat(input);

[Incremental]

@dobbel oups ! of course, I was searching for the problem in my component…

A last question : how to declare more than one function ?
Should I export all functions in boot/fonctions.js ?
… but how to deal if you have many functions ?
Is there a way to do an implicit declaration ??

[dobbel]

@incremental

if you use the import way instead of putting your functions in Vue prototype , you can do this:

import Vue from "vue";

function myFuncA(input) {
	result = input.concat(input);
	return result;
}
function myFuncB(input) {
	result = input.concat(input);
	return result;
}


export { myFuncA, myFuncB };

See:
https://flaviocopes.com/how-to-export-multiple-functions-javascript/

[Incremental]

@dobbel you mean that I don’t have to :

export default ({ Vue }) => {
	Vue.prototype.$myFuncA = myFuncA;
	Vue.prototype.$myFuncB = myFuncB;
};

[dobbel]

@incremental

correct.

[Incremental]

@dobbel just to understand what I’m doing, for what purpose

export default ({ Vue }) => { ... }

could be useful for ?

[metalsadman]

@incremental it’s a way to get the Vue instance, if you’re just consuming that then you don’t need to export it as a function and just do something like this.

import Vue from 'vue'
...
Vue.prototype.$myFuncA ...
...

better read the docs to understand why there’s a export default function there. https://quasar.dev/quasar-cli/boot-files#Introduction

[Incremental]

Thanks all for your help

[Incremental]

@metalsadman Hello, these global functions are working in my app, but now, I’d like to use one in my store.

In my store I have :

import { fonctions } from "boot/fonctions.js";

and inside it, I tried :

state.user["avatar_image"] = fonctions.ReadFile(state.user["avatar_fullpath"], result_msg);

and I get :
Uncaught (in promise) TypeError: boot_fonctions_js__WEBPACK_IMPORTED_MODULE_5__.fonctions is undefined
or with :

this.$ReadFile(state.user["avatar_fullpath"], result_msg);

I get : TypeError: undefined has no properties
state.user[“avatar_image”] = undefined.$ReadFile(state.user[“avatar_fullpath”], result_msg);

How could I call my function ReadFile() ? Thanks

[Incremental]

Solved with :

import { ReadFile } from "boot/fonctions.js";

instead of :

import { fonctions } from "boot/fonctions.js";