在 Vue.js 開發(fā)的動(dòng)態(tài)環(huán)境中，在單個(gè)組件中處理復(fù)雜的業(yè)務(wù)邏輯可能會(huì)導(dǎo)致笨重的文件和維護(hù)噩夢(mèng)。雖然 Pinia 提供集中式狀態(tài)管理，但僅依賴它來(lái)處理復(fù)雜的業(yè)務(wù)邏輯可能會(huì)導(dǎo)致代碼混亂。本文探討了使用 Composition API 的替代方法，說明開發(fā)人員如何將數(shù)據(jù)和邏輯封裝在自定義 hooks 中以實(shí)現(xiàn)高效的狀態(tài)管理。

駕馭復(fù)雜的業(yè)務(wù)邏輯

在日常開發(fā)中，經(jīng)常會(huì)出現(xiàn)功能變得過于復(fù)雜而無(wú)法限制在單個(gè) Vue.js 組件中的情況。分解組件是合乎邏輯的解決方案，但這帶來(lái)了在組件之間共享數(shù)據(jù)和業(yè)務(wù)邏輯的挑戰(zhàn)。雖然 Pinia 在這方面很受歡迎，但如果廣泛用于所有復(fù)雜的業(yè)務(wù)邏輯，它就會(huì)變得不堪重負(fù)。

擁抱 Composition API 和自定義 Hook

一個(gè)引人注目的替代方案是利用 Composition API 將數(shù)據(jù)和業(yè)務(wù)邏輯封裝在自定義 hooks 中。這些鉤子（以 useStore 函數(shù)為例）成為狀態(tài)定義、更新和特定業(yè)務(wù)邏輯的中心。反過來(lái)，組件只需要與這些鉤子公開的狀態(tài)和方法進(jìn)行交互，從而抽象出內(nèi)部的復(fù)雜性。

// 使用 Composition API 自定義 hook
import { computed, ref } from "vue";

// 在 useStore 函數(shù)外部定義 count 變量
const count = ref(0);
const doubleCount = computed(() => {
  return count.value * 2;
});

export const useStore = () => {
  function increment() {
    count.value = count.value + 1;
  }

  function decrement() {
    count.value = count.value - 1;
  }

  return {
    count,
    doubleCount,
    increment,
    decrement,
  };
};

孤立的 Hook 調(diào)用的陷阱

當(dāng) CountValue 和 CountBtn 等組件在其 setup 函數(shù)中獨(dú)立調(diào)用 useStore 掛鉤時(shí)，就會(huì)出現(xiàn)挑戰(zhàn)。本文揭示了每次調(diào)用時(shí)創(chuàng)建 count 變量的獨(dú)立實(shí)例的陷阱，從而導(dǎo)致組件之間的狀態(tài)更新不一致。

// CountValue.vue component
<template>
  <p>count's value is {{ count }}</p>
  <p>doubleCount's value is {{ doubleCount }}</p>
</template>

<script setup lang="ts">
import { useStore } from "./store";

// 對(duì) useStore 的獨(dú)立調(diào)用創(chuàng)建獨(dú)立的 count 實(shí)例
const { count, doubleCount } = useStore();
</script>

// CountBtn.vue component
<template>
  <button @click="decrement">count--</button>
  <button @click="increment">count++</button>
</template>

<script setup lang="ts">
import { useStore } from "./store";

// 對(duì) useStore 的獨(dú)立調(diào)用創(chuàng)建獨(dú)立的 count 實(shí)例
const { decrement, increment } = useStore();
</script>

協(xié)調(diào)組件之間的狀態(tài)

為了克服這一挑戰(zhàn)，一種優(yōu)化方法是將 count 變量的定義重新定位到 useStore 函數(shù)之外。這可確保調(diào)用 useStore hook 的所有組件共享 count 變量的同一實(shí)例，從而促進(jìn)同步狀態(tài)管理。

// 將計(jì)數(shù)定義移至 useStore 函數(shù)之外
import { computed, ref } from "vue";

const count = ref(0);
const doubleCount = computed(() => {
  return count.value * 2;
});

export const useStore = () => {
  function increment() {
    count.value = count.value + 1;
  }

  function decrement() {
    count.value = count.value - 1;
  }

  return {
    count,
    doubleCount,
    increment,
    decrement,
  };
};

在 Pinia 似乎難以應(yīng)對(duì)復(fù)雜業(yè)務(wù)邏輯的各個(gè)方面的情況下，Composition API 提供了一個(gè)干凈、有組織的替代方案。通過將數(shù)據(jù)和邏輯封裝在自定義鉤子中，開發(fā)人員可以在 Vue.js 應(yīng)用程序中的模塊化和高效狀態(tài)管理之間取得平衡。

本文強(qiáng)調(diào)了 Composition API 在構(gòu)建 Vue.js 解決方案中的多功能性，以最大限度地提高靈活性和可維護(hù)性。通過采用自定義鉤子，開發(fā)人員可以編寫符合 Vue.js 原則的有組織、可讀的代碼。

https://blog.stackademic.com/vue-3-you-dont-need-pinia-in-some-scenarios-with-the-composition-api-79fc4ff6ab8f