vue3学习4-pinia+组件通信

集中式状态管理，vue2用vuex，vue3用pinia，相当于react中的redux

引入pinia

pinia的具体存储都放到src/store目录下，每个store.js具体存储实现如下：

修改pinia中的数据 3种方式：

1、可以直接修改从pinia中读取的数据

2、通过.$patch 批量变更多个变量

3、借助action实现变更：

使用storeToRefs对store进行解构赋值，可以避免把store种的方法转为refs，只转换变量

getters，是对store中变量的追加定义

getters可以接收state作为传参，也可以不接收state，直接调用this.xx

调用getters定义的变量：和调用state中定义的变量一样，直接解构赋值/直接调用即可

使用$subscribe进行监听，监听store中数据的变化

store的组合式写法，全部随心写，最后return出去就行

常见组件间通信方式（9种）：

1、props（实现父子组件之间互相传递）

父组件传数据给子组件：

子组件给父组件传递数据：借用回调函数

尽量避免通过父组件给孙组件传递，层级过于复杂

2、自定义事件custom-event（实现子传父）

接收event参数

给子组件绑定自定义事件，在子组件中通过emit触发自定义事件，emit不光可以触发自定义事件，还可以传递参数

事件的命名建议使用小写+'-'的命名方式

3、mitt实现任意组件传递

接受数据的一方提前订阅消息

发送数据的一方写好触发发送逻辑

一般放到src/utils/emitter.js中

绑定事件emitter.on

触发事件emitter.emit

解绑事件emitter.off

获取全部事件emitter.all--解绑全部事件emitter.all.clear()

组件间通信，并且可以传递参数

记得解绑时卸载组件

4、v-model通信（实际开发中很少使用），对于非原生的自定义组件标签

5、$attrs 适用于父组件给孙组件传递信息，祖孙间传递

所有父传子，子未接收的参数都保存在$attrs中

子传孙：

6、$refs，父组件操作子组件通过ref绑定实现

通过$refs可以获取所有的ref

7、$parent，子改父

父组件中需要指定暴露给子组件的内容

8、祖孙间通信provide-inject，向所有孙辈传递数据

provide可以向所有后代传递数据

后代进行接收

inject后代接收时，可以设置默认值（祖先不传递时才使用默认值）

祖先也可以向后代传递回调函数，实现双向通信，传参时不要加.value，否则变量不是响应式

可以传递对象，对象中有变量+回调函数

ref定义的变量在模板语句中调用的时候可以不用加.value，响应式对象可以自动解包

定义在reactive中的ref不用写.value去解析

v-show是否展示

v-model双向绑定数据

指定绑定数据的类型