vue3 pina使用

<script setup>
import { storeToRefs } from "pinia";
import {
  useAboutCompositionApiImplementStore,
  useAboutOptionsApiImplementStore
} from "./stores/about.store";
// 组合式
const aboutCompositionApiStore = useAboutCompositionApiImplementStore();
// const {loading, aboutInfo} = storeToRefs(aboutCompositionApiStore);
// 选项式
const aboutOptionsApiStore = useAboutOptionsApiImplementStore();

</script>
<template>
<div>
  {{aboutCompositionApiStore.aboutInfo.data}}
  <button @click="aboutCompositionApiStore.loadAboutInfo()"> {{ aboutCompositionApiStore.loading ? 'Loading...' : 'Load Data' }}</button>
  <button @click="aboutCompositionApiStore.reset()">reset</button>
</div>
<div>
  {{aboutOptionsApiStore.aboutInfo.data}}
  <button @click="aboutOptionsApiStore.loadAboutInfo()"> {{ aboutOptionsApiStore.loading ? 'Loading...' : 'Load Data' }}</button>
  <button @click="aboutOptionsApiStore.reset()">reset</button>
</div>
</template>

import {defineStore} from "pinia";
import {ref, reactive} from 'vue'
// 使用组合式API
export const useAboutCompositionApiImplementStore =defineStore('aboutCompositionApi', () => {
  const loading = ref(false);
    const aboutInfo = reactive({
      data: []
    });
    const loadAboutInfo = async () => {
      try {
        loading.value = true;
        aboutInfo.data = await new Promise(resolve => {
          setTimeout(() => {
            resolve([
              { id: 1, name: 'John Doe', role: 'CEO' },
              { id: 2, name: 'Jane Smith', role: 'CTO' },
              { id: 3, name: 'Mike Johnson', role: 'Developer' }
            ])
          }, 1000)
        })
      } catch(e) {
      } finally {
        loading.value = false
      }
    }
    const reset = () => {
      loading.value = false
      aboutInfo.data = []
    }
    return {
      loading,
      aboutInfo,
      reset,
      loadAboutInfo,
    }
})

// 使用选项式API
export const useAboutOptionsApiImplementStore =defineStore('aboutOptionsApi', {
  state: () => ({
    loading: false,
    aboutInfo: {
      data: []
    }
  }),
  actions: {
    async loadAboutInfo() {
      try {
        this.loading = true;
        this.aboutInfo.data = await new Promise(resolve => {
          setTimeout(() => {
            resolve([
              { id: 1, name: 'John Doe', role: 'CEO' },
              { id: 2, name: 'Jane Smith', role: 'CTO' },
              { id: 3, name: 'Mike Johnson', role: 'Developer' }
            ]);
          }, 1000);
        });
      } catch (e) {
        console.error('加载失败:', e);
      } finally {
        this.loading = false;
      }
    },
    reset() {
      this.loading = false;
      this.aboutInfo.data = [];
    }
  }
})