前言

之前看过VUE3的文档,现在是实操进行记录下,相关文档如下:
provide/inject: https://v3.vuejs.org/guide/component-provide-inject.html#working-with-reactivity
provide/inject: https://v3.vuejs.org/guide/composition-api-provide-inject.html#using-provide
provide/inject: https://v3.vuejs.org/guide/migration/global-api.html#provide-inject
config.globalProperties: https://v3.vuejs.org/guide/migration/global-api.html#vue-prototype-replaced-by-config-globalproperties
getCurrentInstance: https://v3.vuejs.org/api/composition-api.html#getcurrentinstance

内容

全局方法

• storage.ts

const storage = {
    set(k: string, v: any) {
        localStorage.setItem(k, JSON.stringify(v))
    },
    get(k: string) {
        return localStorage.getItem(k)
    },
    remove(k: string) {
        localStorage.removeItem(k)
    }
}

export default storage

provide/inject

挂载属性

• mian.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { errorHandler } from './utils/error'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
// 引入需要挂载的文件
import packageInfo from '../../package.json'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
errorHandler(app)
// provide进行挂载
app.provide('$version', packageInfo.version)

app.mount("#app")

• index.vue

挂载方法

• main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { errorHandler } from './utils/error'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
// 引入方法
import storage from './utils/storage'
import packageInfo from '../../package.json'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
errorHandler(app)
app.provide('$version', packageInfo.version)
// 挂载方法
app.provide('$storage', storage)

app.mount("#app")

• index.vue

config.globalProperties

挂载属性

• main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { errorHandler } from './utils/error'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import packageInfo from '../../package.json'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
errorHandler(app)
// 挂载
app.config.globalProperties.$version = packageInfo.version

app.mount("#app")

• index.vue

挂载方法

• main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { errorHandler } from './utils/error'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
// 引入全局方法
import storage from './utils/storage'
import packageInfo from '../../package.json'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
errorHandler(app)
app.config.globalProperties.$version = packageInfo.version
// 挂载全局方法
app.config.globalProperties.$storage = storage

app.mount("#app")

• index.vue