前端笔记(4) Vue3 全局属性 app.config.globalProperties 使用案例-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端笔记(4) Vue3 全局属性 app.config.globalProperties 使用案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 前言

学习Vue3有个把月了，记录下学习中的小知识点。
首先很多同学还没找到Vue3真正的官方文档，下面给出Vue3的文档网站
Vue3官网文档
Vue3API文档

2 app.config.globalProperties使用

官方解释：一个用于注册能够被应用内所有组件实例访问到的全局 property 的对象。

案例：
首先有一个请求后端接口的方法

export function listByDictTypeCode(dictTypeCode: string): AxiosPromise<DictData[]> {
    return request({
        url: '/dict/data/dictTypeCode/' + dictTypeCode,
        method: 'get'
    });
}

在main.ts文件中设置app.config.globalPropertie

import {createApp} from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import Pagination from '@/components/Pagination/index.vue';
//引入请求接口的方法
import { listByDictTypeCode } from '@/api/system/dictData';

const app = createApp(App);

//全局方法
app.config.globalProperties.$listByDictTypeCode = listByDictTypeCode;

app.component('Pagination', Pagination)
app.use(router);
app.use(ElementPlus);
app.mount('#app');

在Vue文件中使用getCurrentInstance()，通过proxy.$listByDictTypeCode就可以调用上面定义的方法

这里省略了很多别的代码，只给了能够表明globalProperties使用的代码

<template>
    <el-tree-select
          v-model="dataState.selectValue"
          :data="dataState.dictDataList"
          :props="defaultProps"
          check-strictly
          :render-after-expand="false"
      />
    </el-form-item>
<template>

<script setup lang="ts">
import {nextTick, reactive, ref, getCurrentInstance} from "vue";
const { proxy }: any = getCurrentInstance();

const defaultProps = {
  label: 'name',
  value: 'id',
  children: 'children'
}

const dataState = reactive({
  selectValue: '',
  dictTypeCode: '',
  dictDataList: [] as DictData[]
});

function handleQuery() {
  proxy.$listByDictTypeCode(dataState.dictTypeCode).then((data: any) => {
    console.log(data.data)
    dataState.dictDataList = data.data;
  })
}
</script>