四、Vue3中使用Pinia解构Store

<template>
  <div>
    pinia原始值: {{ Test.current }} --- {{ Test.name }}
    <button @click="change">change</button>
  </div>
  <hr />
  <div>
    解构后值: {{ current }} --- {{ name }}
    <button @click="change">change</button>
  </div>
</template>
<script setup lang="ts">

import { useTestStore } from './store';
import { storeToRefs } from 'pinia';

const Test = useTestStore();

// pinia 解构不具有响应式
// const { current, name } = Test;

// 要使用storeToRefs()
const  { current, name } = storeToRefs(Test);

const change = () => {
  // Test.current++
  // 或
  current.value++
}


</script>
<style scoped></style>