前言
之前看过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
<template> <div class="title">V{{state.version}}</div> </template> <script lang="ts"> import {inject, reactive} from 'vue' export default { name: "dashBoard", setup() { // 进行注入 let version = inject('$version') const state = reactive({ // 使用 version: version, }) onMounted(() => { console.log('onMounted打印全局属性version:',version) }) return { state, } } } </script> <style> .title { font-size: 24px; font-weight: 800; } .margin-top-10 { margin-top: 20px } .windth-320 { width:320px; } </style>
挂载方法
- 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
<template> <div class="title">欢迎进入本助手 | {{state.time}} | V{{state.version}}</div> </template> <script lang="ts"> import {inject, onMounted, reactive} from 'vue' import { format } from 'date-fns' export default { name: "dashBoard", setup() { const version = inject('$version') const storage = inject('$storage') const state = reactive({ time: format(new Date(), "yyyy/MM/dd HH:mm"), version: version, }) onMounted(() => { console.log('onMounted打印全局方法storage', storage) }) return { state, } } } </script> <style> .title { font-size: 24px; font-weight: 800; } .margin-top-10 { margin-top: 20px } .windth-320 { width:320px; } </style>
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
<template> <div class="title">V{{state.version}}</div> </template> <script lang="ts"> import {getCurrentInstance, onMounted, reactive} from 'vue' export default { name: "dashBoard", setup() { const internalInstance = getCurrentInstance() const version = internalInstance.appContext.config.globalProperties.$version const state = reactive({ version: version, }) onMounted(() => { console.log('onMounted打印全局属性version:',version) }) return { state, } } } </script> <style> .title { font-size: 24px; font-weight: 800; } .margin-top-10 { margin-top: 20px } .windth-320 { width:320px; } </style>
挂载方法
- 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
<template> <div class="title">欢迎进入本助手 | {{state.time}} | V{{state.version}}</div> </template> <script lang="ts"> import { getCurrentInstance, onMounted, reactive} from 'vue' import { format } from 'date-fns' export default { name: "dashBoard", setup() { const internalInstance = getCurrentInstance() const version = internalInstance.appContext.config.globalProperties.$version // 引入方法 const storage = internalInstance.appContext.config.globalProperties.$storage const state = reactive({ time: format(new Date(), "yyyy/MM/dd HH:mm"), version: version, }) onMounted(() => { console.log('onMounted打印全局方法storage', storage) }) return { state, } } } </script> <style> .title { font-size: 24px; font-weight: 800; } .margin-top-10 { margin-top: 20px } .windth-320 { width:320px; } </style>
学无止境,谦卑而行.
