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 { 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>