跳到主要内容

前端知识大杂烩

什么是 Composition API ？​

相对于vue2 的 options API，vue3 提供了组合式api。

Composition API 的优点是能够将相关逻辑的代码组织在一个地方，复用重复的逻辑。

Composition API 的核心 API​

  • ref 一般用在基本类型上，在 js 中使用需要加上 .value
  • reactive 一般用在对象类型上，在 js 中使用不需加 .value
  • computed
  • watch
  • onMounted
  • onUnmounted

为什么需要状态管理？​

会有这样的需求，不同的组件之间会使用到同一个数据。

header，productList，footer 组件都会使用到购物车的数据。如果没有状态管理的话，会出现下面的情况

  • 通过 props 层层传递数据 Props 地狱
  • 数据变化了，谁在监听这个数据，数据从哪里来。 难以追踪数据

如何通过 vue 来实现跨组件数据共享？​

  • props（父传子）、emit(子调用父的方法)
  • provide, inject （provide 祖先组件提供数据，inject 后代组件获取数据）
  • pinia (全局状态管理)

详细介绍下 defineStore 的使用方法，以及需要注意的地方。​

Options API​

Composition API​

需要注意的地方​

  1. Store ID 必须唯一
  2. Options API 中定义state 必须是一个函数
  3. 命名, 使用 use 开头，Store 结尾。 如 useUserStore
  4. useUserStore 要在 setup 代码块中使用
  5. 解构 store 的问题
    1. 结构 state 和 getters 需要使用 storeToRefs，不然会失去响应式. const { state, gettters } = storeToRefs(counterStore)
    2. 解构 actions 可以直接使用 const { actions} = counterStore

介绍下 pinna 的 state， getters, action 概念​

state 存储原始数据。

getters 计算属性，基于 state 派生新的数据。有缓存，依赖不变，不会重新计算。

actions 修改 state，处理业务逻辑。推荐使用 actions 修改 state，支持异步

pinia 不是存储数据的吗？ 为什么需要把 “复杂的业务逻辑需要集中管理” ？​

pinia = 数据存储 + 业务逻辑 + 状态管理

pinia 最佳实践​

  1. 放在 store 文件夹下
  2. 文件名，小写，单数
  3. store id 与文件名一致
  4. use + 名称 + Store
  5. state 按功能分组，复杂逻辑抽取到 actions

需要注意的地方

  1. 响应式解构
  2. 在 action 中调用其他 Store（useXxxStore 应该刚在 actions 方法里面）
  3. 使用插件 pinia-plugin-persistedstate 进行持久化
  • pinia 是如何实现类型推导和模块化的？
  • 使用 defineStore 的时候，如何使用 ts 定义 state，getter，actions 的类型？
  • defineStore options api 中如何使用 this？ composition API 如何使用 this？
  • 在调用 getters 的时候需不需要加上() 表示调用函数？
  • State 可以直接修改，但是不推荐，如果直接修改会页面会进行响应式调整吗？
  • 我想要通过 pinia 开始一个项目，我应该做什么项目？
最后于 更新