Vue 3 - pytanie o technikę programowania

Witam!
Ostatnio dużo czasu spędzam w Vue i natrafiłem się na coś co trochę zmieniło moje myślenie o stylu pisania w tym frameworku. Dla mnie każdy plik Vue musi zawierać template, script i style ale natknąłem się na takie cudo. Zazwyczaj przekazywałem jakieś atrybuty do "dziecka" i wyglądało to tak:

const { id, name, adress } = props;

Czy często korzysta się w Vue z takiego rozwiązania jak poniżej?

const {
      showSpinner, showSuccess, showErrors, downloadFile,
    } = useDownloadFile();

link do kodu z opisem: https://www.thisdot.co/blog/vue-3-composition-api-do-you-really-need-it

Taki zapis jest głównie wykorzystywany wtedy kiedy potrzebujemy przenieść część funkcji/logiki do innego komponentu, ale nie możemy przekazać ich np propsem.

Vue 2 w tym celu używało mixinów, które stanowiły taki problem, że zawsze wstrzykiwaly całą swoją zawartość i ciężko było je parametryzowac.

{
   mixins: [DownloadFileMixin, SharedFileMixin]
}

vs

{
  setup() {
     // tutaj nie musimy korzystać z całej zawartości, a jedynie wziąć jakiś fragment
     const { showSpinner } = useDownloadFile(); 
     // const { showSpinner, showSucces, downloadFile } = useDownloadFile(tutaj jeszcze można przekazać argumenty);

     return {
         // ...
     };
  }
}

Dzięki Composition API, które przypomina trochę Hooki z Reactca ten problem znika, pozwala nam to dzielić duże komponenty na mniejsze fragmenty i łatwiej współdzielić kod między nimi.

Krwawy Ork napisał(a):

Dla mnie każdy plik Vue musi zawierać template, script i style

No to jest Vue Template syntax, również znany jako Vue Single-file Component, i fakt, jest popularny, ale to nie jest jedyny sposób.

Np taki zapis, to jest pełnoprawny komponent w Vue:

const name = "Mark";

new Vue({data: {name}});

Zaczynam powoli chyba rozumieć. Ale np. useDownloadFile może być wykorzystywany w wielu komponentach lecz poniższa funkcja useProducts może być tylko w jednym komponencie użyta, a nie w wielu ponieważ zawiera w sobie stan products. Dlatego w przypadku useProducts, tablicę products będziemy musieli przekazywać do dzieci. :O

import { ref } from "@vue/composition-api";

export const useProducts = () => {
  const products = ref([]);

  const createProduct = ({ id, name, price }) => {
    products.value.push({ id, name, price });
  };

  const updateProduct = ({ id, name, price }) => {
    const itemIndex = products.value.findIndex(p => p.id === id);

    if (itemIndex < 0) {
      return;
    }

    products.value.splice(itemIndex, 1, { id, name, price });
  };

  const deleteProduct = id => {
    const itemIndex = products.value.findIndex(p => p.id === id);

    if (itemIndex < 0) {
      return;
    }

    products.value.splice(itemIndex, 1);
  };

  return {
    createProduct,
    updateProduct,
    deleteProduct,
    products
  };
};

Krwawy Ork napisał(a):

Ale np. useDownloadFile() może być wykorzystywany w wielu komponentach lecz poniższa funkcja useProducts() może być tylko w jednym komponencie użyta, a nie w wielu ponieważ zawiera w sobie stan products. Dlatego w przypadku useProducts, tablicę products będziemy musieli przekazywać do dzieci. :O

No tak, i to jest by design.

Zastanawiam się, czy można skrócić zapis w return za pomocą spread operator ale pojawia się błąd:

21:13 error 'contactList' is assigned a value but never used no-unused-vars
21:26 error 'addContact' is assigned a value but never used no-unused-vars
21:38 error 'removeContact' is assigned a value but never used no-unused-vars

export default {
  components: {
    AddContactForm,
    ContactList,
  },

  setup() {
    const { contactList, addContact, removeContact } = useContacts();
    
    return { ...useContacts() };
  },
};

Krwawy Ork napisał(a):

Zastanawiam się, czy można skrócić zapis w return za pomocą spread operator ale pojawia się błąd:

21:13 error 'contactList' is assigned a value but never used no-unused-vars
21:26 error 'addContact' is assigned a value but never used no-unused-vars
21:38 error 'removeContact' is assigned a value but never used no-unused-vars

Ale to jest tylko lint, który mówi o tym że masz nieużywane zmienne.

Tak sobie pomyślałem, że mogę stworzyć funkcję useToggleModal(), a w niej:

const showModal = ref(false);

const toggleModal = () => {
      showModal.value = !showModal.value;
    };

Ponieważ wymyślałem tzw. action buttony, które otwierają modal z różną zawartością i praktycznie cały czas ten kawałek kodu jest powtarzany.

Mam jeszcze jedno pytanie, nie mogę zrobić importu pliku useToggleModal.js... czy dlatego, że jest za bardzo zagnieżdzony? Próbowałem trzy kropki ale nie działa.

edit: już działa, wystarczyło: import useToggleModal from "../../functions/useToggleModal.js";