使用Vue3中的pinia管理 前端的对象

import { ref, computed } from "vue";
import { defineStore } from "pinia";

export const test2Store = defineStore("myTest2", () => {
  let globalVariable = ref({
    short1: 0,
    short2: 0,
    short3: 0,
    float1: 0.0,
    float2: 0.0,
    float3: 0.0,
    float4: 0.0,
    float5: 0.0,
    float6: 0.0,
    float7: 0.0,
  });
  const doubleCount = computed(() => globalVariable.value.float2 * 2);
  function increment() {
    globalVariable.value.float2++;
  }

  return { globalVariable, doubleCount, increment };
});

<script setup>
//import { myTest } from "../stores/myTest";
import { counterStore } from "../stores/counter";

import { test2Store } from "../stores/myTest2";

const MycounterStore = counterStore();
const myTestStore = test2Store();
</script>

<template>
  <div class="about">
    <!-- <h1>float1:{{ myTestStore.globalVariable.float1 }}</h1>
    <button @click="incrementShort2">add1</button> -->
    <h1>count:{{ MycounterStore.count }}</h1>
    <br />
    <button @click="MycounterStore.increment()">mybtn</button>

    <h1>float2:{{ myTestStore.globalVariable.float2 }}</h1>
    <h1>doubleFloat2: {{ myTestStore.doubleCount }}</h1>
    <button @click="myTestStore.increment()">mybtn2</button>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>