学习vue3，都会从基础知识点学起。了解setup函数，ref，recative，watch、computed、pinia等如何使用
今天说vue3组合式api，pinia
戳这里，跳转pinia中文文档
官网的基础示例中提供了三种写法
1、选择式api，类似于vuex的写法
2、组合式api，vue3 组合式api写法
3、借助辅助函数mapStores()、mapState() 或 mapActions()
本文主要讲第二种写法，它与vue3的语法风格是统一的
使用：
1、定义store(state+action+getters)
//defineStore函数创建store实例对象
//defineStore函数需要传递两个参数，第一个参数:小仓库名字(唯一id，不可重复，
用于区分是哪个store，这样就不会出现命名冲突，组件中使用仓库数据是通过定义变量(useCounterStore )接收defineStore方法返回的函数，和仓库名(counter)没有直接关系)
//第二个参数:小仓库配置对象
//defineStore方法执行会返回一个函数,函数作用就是让组件可以获取到仓库数据
import {defineStore} from 'pinia'
import {ref} from 'vue'
import axios from 'axios'
export const useCounterStore = defineStore('counter',()=>{
//数据(state)
const count = ref(0)
const API_URL = '/api/booklist'
cosnt list = ref([])
//getter
const deoubleCount = computed(()=>count.value*2)
//修改数据的方法
//(同步action)
const increment= ()=>{
count.value++
}
//(异步action,与组件中定义数据和方法的风格完全一致)
const loadList = async ()=>{
const res = await axios.get(API_URL)
list.value = res.data
}
//以对象形式返回
return {count,increment,deoubleCount,list,loadList }
})
2、组件使用store
<script setup>
//1、导入`useCounterStore `方法
import {useCounterStore } from '@/stores/counter'
//2、执行方法得到counterStore对象
const counterStore = useCounterStore ()
console.log(counterStore)
//counterStore 对象包含的就是counter仓库中return出来的对象
onMounted(()=>{
counterStore.loadList()
})
</script>
<template>
<button @click="counterStore.increment ">
{{counterStore.count}}{{counterStore.deoubleCount }}
</button>
<ul>
<li v-for="item in counterStore.list" :key="item.id")>
{{item.name}}
</li>
</ul>
</template>
打印counterStore
storeToRefs
为什么要使用storeToRefs，可以简化写法，原先的counterStore.count通过解构可以直接使用count。中文文档中特意注明，不能直接对store进行解构，会破坏响应式。响应式丢失，视图也不再更新。所以使用storeToRefs函数可以辅助保持数据（state+getter）的响应式解构
有效写法：
观察下区别，错误写法下，打印count，deoubleCount ，拿到的是两个0
正确写法下，，打印count，deoubleCount ，拿到的是两个响应式的对象
方法不需要通过storeToRefs函数解构赋值，直接从原来的counterStore中解构赋值
const {increment } = counterStore
