VUE3——如何挂载全局属性和方法

前言

之前看过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 {
    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 {
    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 {
    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 {
    320px;
  }
</style>