• 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>
    

    学无止境,谦卑而行.
  • 相关阅读:
    水晶报表设计--基本概念
    微信公众平台开发小结
    CCF计算机职业认证考试
    Linux 命令
    百度搜索引擎的一些技巧
    Windows的一些操作命令
    Eclipse:写jsp 出现的一些问题
    操作系统(基本问题)
    C语言编程技巧(注意点)
    mysql命令报错问题
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/15624101.html
Copyright © 2020-2023  润新知