vue3.0基础页面写法

最新推荐文章于 2024-09-05 20:32:11 发布

qq_37299525

最新推荐文章于 2024-09-05 20:32:11 发布

阅读量1.1k

点赞数

文章标签： typescript vue.js javascript

本文链接：https://blog.csdn.net/qq_37299525/article/details/125167523

版权

该博客展示了如何在Vue应用中利用TypeScript进行数据获取。通过`DEMO_DETAIL_API`从store中获取数据，并在模板中显示。`InfoModule`函数用于封装数据和事件处理方法，`onMounted`生命周期钩子确保在组件挂载后执行数据获取操作。

摘要由CSDN通过智能技术生成

app.vue

<template>
    {{ info.a }}
    <div @click="onChangeInfo">获取数据</div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, ref, onMounted } from "vue";

function InfoModule(self: any) {
  const info = ref({});
  const onChangeInfo = () =>
    self.$store.dispatch("DEMO_DETAIL_API").then((dd: any) => {
      info.value = dd;
    });
  return { info, onChangeInfo };
}

export default defineComponent({
  setup(props) {
    const { proxy }: any = getCurrentInstance();
    const infoToRefs = InfoModule(proxy);

    onMounted(() => {
      console.log("onMounted", props, proxy.$root);
      infoToRefs.onChangeInfo()
    });

    return {
      ...infoToRefs,
    };
  },
});
</script>

main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import parentTool, * as tool from './prototype';

const app: any = createApp(App)

// console.log('tool', tool)

Object.assign(app.config.globalProperties, parentTool, tool, { __foo: '11' })
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    [index: string]: unknown;
  }
}

app
  .use(store)
  .use(router)
  .mount('#app');