VUE3 使用 provide/inject 实现类似vuex 的简单数据共享

自己的项目中没有使用vuex，但是某些地方又需要数据共享。经过多方查找，发现可以利用依赖注入来实现。下面是实现方法，记录下来以便后面查找。如有什么错误的地方欢迎指正。

首先需要实现数据处理逻辑

//user.js
const userStore = () => {
	//这里可以使用vue3 的响应式
	const userInfo = ref("")
	const getUser = () => {
	//	通过接口获取到user的信息
	userInfo.value = userInfo_by_api;
	}
	// ... 一些其他的方法
	return {
	//返回需要用到的属性
		getUser(),
		userInfo,
		....
	}
}

接下来需要把方法以注入的形式暴露出来给需要的地方调用。

//user.js
....
//需要给provide一个唯一的名称以免后面调用的时候冲突。
const user = Symbol('user') //这里使用Symbol 新的一个数据类型，保证变量名唯一
const useUser = () => inject(user) //这里使用inject调用 provide注入的userStore的方法。
//把方法都export出去
export {
	user,
	userStore
}
export default useUser

以插件的形式把所有的store都集合起来，然后provide注入。

//index.js
import {user, userStore} from "path/to/user.js"
const store = {
  install: (app: App) => {
    app.provide(user, userStore());
  }
};
export default store;

然后在main.js 中use

//main.js
import store from "path/to/index.js"
......
createApp(App).use(store)

最后就可以在需要使用的地方使用了

//other_need_use.js
import useUser from "path/to/user.js"
const user = useUser()
//可以通过user.xxx 访问user.js中的属性了。
//user.getUser() 等等。