Pinia从安装到使用
什么是Pinia
添加Pinia到vue项目
使用Pinia实现计数器案例
counter.js
import {defineStore} from "pinia";
import {ref} from "vue";export const useCounterStore = defineStore('coutner',()=>{//定义数据（state）const count = ref(0)//定义修改数据的方法（action同步+异步）const add = ()=>{count.value++}//以对象的形式return供组件使用return {count,add}
})
App.vue
<script setup>
import {computed, provide, ref, watch} from "vue";
import Son from './components/Son.vue';
import {useCounterStore} from "./stores/counter";
//导入//执行方法得到useCounterStore的实例对象，实例化
const counterStore = useCounterStore()</script><template><div><button @click="counterStore.add">{{counterStore.count}}</button></div>
</template>
getter和异步action
storeToRefs
storeToRefs 是 Pinia 提供的一个实用函数，用于将 store 中的状态转换为响应式引用（reactive refs）。这使得在 Vue 组件中使用 Pinia 的状态更加方便，尤其是在组合式 API 中。
为什么使用 storeToRefs？
在组合式 API 中，直接从 store 中解构状态可能会导致失去响应性。使用 storeToRefs 可以确保我们解构出来的每个状态仍然是响应式的。
需要注意的是，要区分一下，解构数据和解构方法是不一样的
解构数据需要加上storeToRefs（否则会失去响应性），解构方法则不需要担心。
<script setup>
import {computed, provide, ref, watch} from "vue";
import Son from './components/Son.vue';
import {useCounterStore} from "./stores/counter";
import {storeToRefs} from "pinia";
//导入//执行方法得到useCounterStore的实例对象，实例化
const counterStore = useCounterStore()
const {add} = counterStore
const {count} = storeToRefs(counterStore)
</script><template><div><button @click="add">{{count}}</button></div>
</template>
总结
