柴柴记账-Pinia在TS中的使用

71 阅读1分钟

为何需要Pinia?

如果是一个组件,props用来放外部传进来的

image.png

如果有父子组件,父组件的ref、reactive 作为子组件的props

image.png

如果是爷孙组件,除了进行两次props之外,还可以用provide和inject

image.png

总结:Pinia应用于复杂关系组件之间传值

Pinia在TS中的使用(和在JS中差不多)

  1. 安装
  2. main.ts引入、注册 image.png image.png
  3. 创建仓库,注意类型问题

image.png

image.png 4. 全局使用,在main.ts中全局使用

image.png

注意点1

如果想要解构一层的话,需要用storeToRefs来包裹一层才行

发现控制台始终有警告,尝试封装hooks来解决

封装一个userAfterMe

等待加载完毕再挂载

注意点2

pinia的id是用来做什么的?id就是来确保每一个item有一个单独的库,而我们创建的item仓库是三个一同展示的

image.png