前言
之前看过VUE3的文档,现在是实操进行记录下,相关文档如下:provide/inject
: https://v3.vuejs.org/guide/component-provide-inject.html#working-with-reactivityprovide/inject
: https://v3.vuejs.org/guide/composition-api-provide-inject.html#using-provideprovide/inject
: https://v3.vuejs.org/guide/migration/global-api.html#provide-injectconfig.globalProperties
: https://v3.vuejs.org/guide/migration/global-api.html#vue-prototype-replaced-by-config-globalpropertiesgetCurrentInstance
: 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>