フロントエンドのメモ (4) Vue3 グローバル プロパティ app.config.globalProperties の使用例

1 はじめに

Vue3 を学習して約 1 ヶ月になりますが、学習中のちょっとした知識ポイントを記録していきます。
まず、多くの学生は Vue3 の実際の公式ドキュメントを見つけていませんが、Vue3 ドキュメント Web サイト、
Vue3 公式 Web サイトのドキュメント、
および Vue3API ドキュメントを以下に示します。

2 app.config.globalProperties の使用法

公式説明: アプリケーション内のすべてのコンポーネント インスタンスがアクセスできるグローバル プロパティを登録するために使用されるオブジェクト。

ケース:
まず、バックエンド インターフェイスをリクエストするメソッドがあります。

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>