Vue 使用provide/inject 代替Vuex

刚在B站看了VueUse的作者分享的vue实用技巧，赶快记下来。

目的：在根组件中provide一个只读的响应式变量用来代替Vuex

1、定义全局变量接口

declare interface UserInfo {
    id: string,
    name: string
}

2、初始化全局变量

import { inject, reactive } from "vue";
import { InjectionKey } from "vue";
export const userinfoKey: InjectionKey<UserInfo> = Symbol()

export const userinfoValue = reactive({ id: "123", name: "张三" })

export function useUserInfo() { return inject(userinfoKey) as UserInfo }

export function setUserInfo(user: UserInfo) {

    Object.assign(userinfoValue, { ...user })

}

export default [userinfoKey, userinfoValue]

3、创建插件Vue.use()

import { App, readonly } from "vue";
import { userinfoKey, userinfoValue } from './UserInfo'

export default function createContext() {

    return {
        install(app: App) {

            app.provide(userinfoKey, readonly(userinfoValue))
            
        }

    }

}

4、main.ts 中使用

app.use(createContext())

5、其他组件使用

import { useUserInfo, setUserInfo } from '../context/UserInfo'

const userinfo = useUserInfo() 
function updateuser() { setUserInfo({ ...userinfo, name: userinfo.name + "888" }) }