vue3 相关知识汇总

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