composition是什么意思

Vue3CompositionAPI中inject细节

这周在做公司的后台管理项⽬，因为是突击项⽬做的⽐较简单。只需要做⼀个伪登录页⾯，和数据展⽰页⾯，考虑到后期需要，还是

觉得⽤状态管理做⼀下登录逻辑。

最开始是准备使⽤Vue3新特性(?好像Vue2就存在，只是当时好像没有什么教程有讲这个API)

//使⽤Vue3的tup语法糖(优点:减少代码量，组件引⼊⾃动注册，⾃动returntup中定义的变量)

//

import{provide,ref}from'vue'

//此处提供登录初始状态以及初始⽤户信息(以键值对的形式)

//如provide('isLogin',ref(fal))表⽰登录状态为未登录

provide(key,value)

//...

//下级组件..

import{inject}from'vue'

//使⽤inject获取上级组件中provide暴露出来的数据

//如inject('isLogin')来获取登录状态(inject获取出来的数据是响应式的)

constvalue=inject(key)

//...

然后想到后续会有登录相关的通⽤⽅法，重复的写显然不合适，于是准备在src⽬录下新建common⽬录，在⾥⾯编写通⽤⽅法并导

出。

//src/common/

import{inject}from'vue'

exportfunctionlogin(){

//...登录逻辑

//修改登录状态

inject('isLogin').value=true;

//...登录后续处理(跳转/toast/message...)

}

exportfunctionloginout(){

//...登出逻辑

//修改登录状态

inject('isLogin').value=fal;

//...登出后续处理(跳转/toast/message...)

}

重新加载后发现控制台报了个[vuewarn]:inject()canonlybeudinsidetup()orfunctionalcomponents.意思是inject⽅法

只能使⽤在tup⼊⼝⽅法或者函数式组件内。不仅如此后续在组件外使⽤Vue-Router的uRouter/uRoute、Vuex的uStore

、Vue3组件库Naive-UIMessage组件的uMessage也会报同样的错。

后续通过查看Naive-UImessage组件的uMessage部分ts源码，发现其类型是MessageApiInjection，推测其实现上应该是使⽤

了Compostionprovide和inject。

解决⽅案在naive-ui的⽂档中就有

将inject等注⼊组件挂载到window上使⽤，需要注意的是确保注⼊组件已经挂载成功(其实只需要使⽤ES6中的可选链操作符`?.`即

可，Fn?.fn)；

不过最后我还是使⽤Vuex进⾏状态管理，总觉得provide和inject不是很适合当前场景...