vue3 依赖注入 vueRouter vuex

目录

01 依赖注入

02 组合式API里面的vueRouter

03 组合式API中的vuex的使用

---

 

01 依赖注入

        使用场景：

        有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据。

       1.组先组件给后代组件传参

        组先组件:

                从vue中解构provide方法 provide("自定义变量名",数据)

        后代组件:

                从vue中解构 inject方法 let变量 = inject("组先组件的变量名")

                变量的值就是组先组件传递过来的数据

       2.后代组件修改数据给组先组件传参

         后代组件:

                let 函数名 = inject("自定义函数名")

                通过事件调用 函数名(传递的参数)

        组先组件

                在setup里面 provide("后代组件传递的自定义函数名",驱动函数)

                通过驱动函数的形参接收传递的数据

        

02 组合式API里面的vueRouter

        选项式api里面是通过this.$router调用router里面的方法

        在组合式api中使用vueRouter 需要先将useRoute,useRouter通过解构的方式

       从vueRouter里面拿出来并引入,然后定义变量等于useRoute和useRouter方法,

        通过定义的变量调用router里面的方法.

03 组合式API中的vuex的使用

        选项式api里面vuex的数据可以通过this.$store或者四大辅助函数来获取。

        组合式api需要先将useStore从vuex中解构出来引入, 定义变量等于解构出来的方法,

        通过变量.state,getters,commit,dispatch去获取vuex中的数据或方法