I have a component which lets me upload a file, and another component that shows the files that have been uploaded:
<FileUpload />
<FileList />
FileList has a refresh method that will get the latest files. FileUpload has an emit "uploadFinished".
I would like to trigger a refresh of my FileList after an upload in FileUpload. What is the "Vue way" of communicating between those components?
I find the official explanation rather disappointing. Bearing in mind that my components do not necessarily have to be siblings (or have any close relation for that matter), I am not sure how I can achieve this exclusively with VueX (which I am using).
I can trigger the loading of the files with an action, but inside my FileList I am doing other internal things as well, like setting a loading and resetting the GUI. Those things cannot be controlled by data in my VueX State alone.
const refresh = (pageNum = 0) => {
collapseAll();
isLoading.value = true;
store.dispatch(LOAD_FILES_REQUEST, setParams(pageNum)).finally(() => {
isLoading.value = false;
});
};
To me, an event Bus seems to be the logical (and easiest) solution. Why is it frowned upon?