Vue 3 Composition API에서 재사용 가능한 모듈과 구성 요소를 알아야 합니다.

Vue로서js 개발자, 우리는 가장 많은 재사용 가능한 코드를 만들어서 코드를 깨끗하고 깔끔하게 유지하기를 희망합니다.
Composition API가 있는 VUE3에서 우리는 다시 사용할 수 있는 JS 모듈, 즉 갈고리 함수와 하위 구성 요소를 만들어서 이 점을 실현할 수 있다.
그렇다면 그들 사이에는 어떤 차이가 있을까?
우리는 언제 그 중의 하나를 사용합니까?
어디 보자!
JavaScript 모듈 aka hook 함수는 비즈니스 논리를 Vue 구성 요소와 분리하는 좋은 방법입니다.
그것은 완전히 다시 사용할 수 있고 사용자 인터페이스에 독립되어 있다.
MVC 모드에서 온 경우 M(Model) 섹션이 됩니다.
HTML 템플릿 코드, 즉 여러 부모 구성 요소에서 사용할 수 있는 UI를 다시 사용하려면 페이지 기반 Vue 구성 요소(연결되지 않은 루트)가 아닌 것이 좋습니다.
이제 당신은 차이에 대해 더 잘 이해할 수 있을 뿐만 아니라 언제 어떤 차이를 사용하는지에 대해서도 더 잘 이해할 수 있습니다.
본문에서, 나는 몇 가지 예시 코드로 그것을 어떻게 사용하는지 보여줄 것이다.

Note: This article is intermediate and you should have the basic knowledge of using Vue.js or a similar framework.

제품 목록 가져오기
나는 네가 어떻게 얻는지 이미 알고 있다고 생각한다. Up and Running With Vue JS 3 Project Using Vue CLI
만약 우리가 제품 목록을 가지고 있다면.제품 목록을 얻기 위해 vue 페이지의 구성 요소를 기반으로 비동기 동작을 처리합니다.
다음 예제에서는 Firebase를 사용하여 비동기식 작업을 수행합니다.

I have an article on how to install Firebase to your vue project as well as on how to make Cloud Firestore queries if you’re interested.

우선, 제품 반응 그룹을 만들고, onMounted () 생명주기 방법에서loadProduct () 함수를 호출합니다.

Recommended
Must-Know Ref vs Reactive Differences In Vue 3 Composition API

import firebase from "firebase";
import { onMounted, reactive } from "vue";
export default {

  setup() {

    const products = reactive([]);

    onMounted(() => {
      loadProducts();
    });

    const loadProducts = async () {
      try {
        const productsSnap = await firebase
          .firestore()
          .collection("products")
          .orderBy("brand", "asc")
          .get();

        productsSnap.forEach((doc) => {
          let product = doc.data();
          product.id = doc.id;
          products.push(product);
        });

      } catch (e) {
        console.log("Error Loading Products");
      }
    }

    return {
      products,
    };
  },
};

loadProducts () 성명에서Firebasequery를 사용하여 Firebase Cloud Firestore database 에 저장된 제품 목록을 가져옵니다.
마지막으로 템플릿에 사용할 제품 그룹을 되돌려줍니다.
각 제품 객체에는 두 개의 키가 있습니다.

직함

upc

별거 아니야.
이거 대박이다!
프로젝트가 발전함에 따라 제가 재고 구성 요소를 만들어야 한다고 가정하면 그 중에서 제품 목록을 밑에 있는 목록으로 사용하고 싶습니다. 예를 들어 재고를 만들 제품을 선택하고 싶습니다.
loadProducts () 코드를 다시 써야 합니다. 그러고 싶지 않습니다.
Vue 3 Composition API를 사용하면 UI와 별도로 JavaScript 모듈에서 비동기 코드를 쉽게 추출할 수 있으며 응용 프로그램 어디에서나 재사용할 수 있습니다.
어떻게 하는지 보여줘.

재사용 가능한 제품입니다.js 모듈
하나의 제품을 창조하다.src/modules 폴더에 있는 js 파일입니다. 이것은 제품과 관련된 모든 비동기적인 작업 위치입니다. 예를 들어loadProducts,addProduct,updateProduct,deleteProduct 등입니다.
ProductList에서 loadProducts () 코드를 추출하는 방법을 보여 줍니다.제품js.
이 도구를 사용하여 CRUD 비동기식 작업을 수행하므로 가져오기Firebase를 수행합니다.
그리고useproduct () 함수와 함수의 반응 상태 대상을 설명합니다. 이 대상에는products라는 속성이 있습니다. 이것은 그룹의 한 종류입니다.

import { reactive, toRefs } from "vue";
import firebase from "firebase";

export default function useProduct() {
  const state = reactive({
    products: [],
  });

  const loadProducts = async() => {
    try {
      const productsSnap = await firebase.firestore().collection("products").orderBy("brand", "asc").get();
      productsSnap.forEach(doc => {
        let product = doc.data();
        product.id = doc.id;
        state.products.push(product);
      });
    } catch (e) {
      console.log("Error Loading Products")
    }
  }
  return { ...toRefs(state),
    loadProducts
  }
}

그리고loadProducts() 함수를 만듭니다. 이 함수는 Cloud Firestore의 제품 집합에서 제품 데이터를 얻고 스냅샷을 가져옵니다.
이를 통해 각 제품을 제품 어레이로 밀어 넣습니다.
마지막으로 상태와loadProduct를 되돌려줍니다.
내가 toRefs로 state를 포장하는 이유는 수동적인 대상을 일반 자바스크립트 대상으로 바꾸어 필요할 때 분해하기 위해서이다.
이제 우리는 제품이 생겼다.js 모듈은 ProductList에서 사용할 수 있습니다.vue 또는 저희 프로그램에 제품 목록을 보여 줄 구성 요소입니다.

제품 목록vue
이제 우리는 4단계만으로도 이전과 같은 제품 목록을 쉽게 얻을 수 있다.
먼저 상단의 제품 모듈을 가져옵니다.
그 다음에useProduct () 함수를 호출하고 setup () 함수에서 제품과loadProducts를 분해합니다.
그런 다음 onMounted () 라이프 사이클 방법에서loadProducts () 를 호출합니다.

import { onMounted } from "vue";
import useProduct from "@/modules/product";
export default {
  setup() {
    const { products, loadProducts } = useProduct();
    onMounted(async () => {
      await loadProducts();
    });
    return {
      products,
    };
  },
};

마지막으로 이전과 같은 제품을 반품합니다.
이 단계에서 제품은 템플릿에서 사용할 수 있고 v-for로 순환해서 우리가 원하는 방식을 나타낼 수 있습니다.

Recommended
Vue + Firestore ← Build A Simple CRUD App with Authentication

모듈식 제품을 만드는 것이 얼마나 쉬운지 알 수 있다.js 조직은 UI와 독립적인 기능을 다시 사용할 수 있습니다.🙂
Product와 같은 모듈을 사용하면 또 하나의 장점이 있다.js도 상태 관리로 사용합니다.

상태 관리 모듈
모듈을 상태 관리로 사용하려면 useProduct () 함수 외에 상태 대상 모델을 설명하고 이 함수는 전역 변수가 됩니다.

import { reactive, toRefs } from "vue";
import firebase from "firebase";

 const state = reactive({
        products: [],
 });

export default function useProduct() {
  ...
}

Continue Reading...