1 组合式api 和选项式api
1.1 概念
选项式api：用包含多个选项的对象来描述组件的逻辑。
组合式api：组合式api使用导入的API函数来描述组件逻辑。组合式API通常会与<script setup>搭配使用。
1.2 应用场景
选项式api： 不需要使用构建工具 或者低复杂度的场景，
组合式api：使用VUE构建完整的单页应用，建议使用单页面+ vue组合式api。
1.3 特点
选项式api:
1 依赖都写在data里面
2 方法都写在methods里面
3 每次使用组件都需要先导入再导入
组合式api的特点：
1 组合式的依赖和方法不区分区域直接写在js的模块里
2 组合式的响应式依赖需要使用ref(基本数据)，和reactive(引用数据)来实现数据的响应
3 需要什么就导入什么
2 状态管理pinia
2.1 核心
Store
State
Getter
Action
2.2 组合式api
ref就是state属性
computed() 就是getters
function()就是actions
2.3 Pinia解构方法
1 storeToRefs
2 $patch 接受两个类型的参数，函数和对象
$patch + 对象
$patch + 函数：通过函数方法去使用的时候，函数接受一个state的参数，state就是store仓库中的state
<script setup lang="ts">
import { mainStore } from './store';
const store = mainStore()
// $path + 对象
const onObjClick = ():void => {
store.$patch({
count: store.count + 2,
msg: store.msg === 'hello world!' ? '你好 世界!' : 'hello world!'
})
}
// $patch + 函数
const onFunClick = ():void => {
store.$patch((state) => {
state.count += 2
state.msg = store.msg === 'hello world!' ? '你好 世界!' : 'hello world!'
})
}
</script>
<template>
<div>
<button @click="onObjClick">修改所有状态($patch + 对象)</button>
<button @click="onFunClick">修改所有状态($patch + 函数)</button>
</div>
</template>s