Vue3使用组合式API实现代码的逻辑复用

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
};
</script>

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  const decrement = () => {
    count.value--;
  };
  return { count, increment, decrement };
}

<template>
  <div>
    <h1>Counter 1: {{ counter1.count }}</h1>
    <button @click="counter1.increment">Increment Counter 1</button>
    <h1>Counter 2: {{ counter2.count }}</h1>
    <button @click="counter2.increment">Increment Counter 2</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const counter1 = useCounter();
    const counter2 = useCounter();
    
    return { counter1, counter2 };
  }
};
</script>

<template>
  <div>
    <h1>Data: {{ fetchData.data }}</h1>
    <button @click="fetchData.loading">Fetch Data</button>
    <h1>Counter: {{ counter.count }}</h1>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';
import { useFetch } from './useFetch';

export default {
  setup() {
    const counter = useCounter();
    const fetchData = useFetch('https://api.example.com/data');

    return { counter, fetchData };
  }
};
</script>