Vue3 pinia管理数据的3种方式代码

<template>
<div class="count">
    <h2>当前求和为：{{ countStore.sum }}</h2>
    <h3>欢迎来到:{{ countStore.school }}，坐落于：{{ countStore.address }}</h3>
<select v-model.number="n">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
    <button @click="_add">加</button>
    <button @click="_jian">减</button>
</div>
</template>
<script setup lang='ts' name="Count">
    import {ref} from 'vue'
    import {useCountStore} from '@/store/Count'
    const countStore = useCountStore()
    let n = ref(1)

    function _add(){
  
    function _jian(){
        
    }

</script>
<style scoped>
  .count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  select,button {
    margin: 0 5px;
    height: 25px;
  }
</style>

import {defineStore} from 'pinia'

export const useCountStore = defineStore('Count',{
  // 真正存储数据的地方
  state(){
    return {
      sum:2,
      school:'北京大学',
      address:'北京'
    }
  }
})

countStore.sum+=n.value

countStore.$patch({
          sum:888,
          school:'清华大学',
          address:'北京'
        }) 

actions:{
    increment(value){
      if( this.sum < 10){
        // 修改数据（this是当前的store）
        this.sum += value
      }
    }
  }

countStore.increment(n.value)

<template> 
  <div> 
   Count: {{ pinia.count }}
    <button @click="pinia.addCount"></button>
  </div> 
</template>
 <script setup>
import { watch } from 'vue'
<code>import { myPinia} from './pinia' 
const pinia = myPinia()
  watch(() => pinia .count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    })</code>
<code></script> </code>