四、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>