pinia全局状态管理

使用：结合vue2、vue3使用
优点：相比vuex：提供组合式和选项式的写法，支持ts类型推断，提供更简洁的状态管理（去除mutation）
注意点：
（1）使用store时不要结构，会失去响应性，因为store实际上是被reactive，结构同vue3，可以使用const { name, doubleCount } = storeToRefs(store)去解构（它将为每一个响应式属性创建引用）
（2）store 是一个用 reactive 包装的对象，这意味着不需要在 getters 后面写 .value

<script setup>
const store = useCounterStore()
// ❌ 这将不起作用，因为它破坏了响应性
// 这就和直接解构 `props` 一样
const { name, doubleCount } = store 
name // 将始终是 "Eduardo" 
doubleCount // 将始终是 0 
setTimeout(() => {
  store.increment()
}, 1000)
// ✅ 这样写是响应式的
//  当然你也可以直接使用 `store.doubleCount`
const doubleValue = computed(() => store.doubleCount)

// 写法2  action是直接被绑定到 store 上的，可以直接解构，解构后的state属性是r响应式ef
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount } = storeToRefs(store)  
// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>