How to trigger a method in another component in Vue3 (Composition API) if a global event bus is discouraged?

Viewed 85

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?

0 Answers
Related