在vue3里直接实现函数

请问为什么在vue3中这样写这个函数不能实现啊，该怎样让它实现啊
感谢感谢

可以使用 setup 函数来代替 Vue2 中的 data 和 methods，而且 setup 函数只能返回响应式的数据或者一个对象，不能返回一个函数。

如果你想在组件中调用一个函数，可以直接在 setup 函数内定义该函数，并将其返回给模板使用。例如：

<script>
import { mainstore } from '../store';

export default {
  name: 'Typenav',
  setup() {
    const store = mainstore();

    const categoryListion = () => store.categoryList();

    return {
      categoryListion,
    };
  },
};
</script>

这样，在模板中就可以通过 categoryListion() 来调用该函数了。请注意，你需要先将 store 实例化，才能在 categoryListion 函数中使用它。

不知道你这个问题是否已经解决, 如果还没有解决的话:

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7589580
你也可以参考下这篇文章：如何在vue3中实现自动注入路由

除此之外, 这篇博客: 搞懂Vue3中的异步组件，看这篇就够了中的 传递工厂函数作为参数 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

defineAsyncComponent方法接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。

我们这里以Vue Cli创建的项目为例，这里我稍微做了一下修改，将头部的图片拆分为一个组件，代码如下：

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import LogoImg from './components/LogoImg.vue'
import HelloWorld from './components/HelloWorld.vue'
</script>

现在我们就将<hello-world>组件修改为异步组件，示例代码如下：

<template>
  <logo-img />
  <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
import LogoImg from './components/LogoImg.vue'

// 简单用法
const HelloWorld = defineAsyncComponent(() =>
  import('./components/HelloWorld.vue'),
)
</script>

我们这里为了看到效果，将import延迟执行，示例代码如下：

<script setup>
import { defineAsyncComponent } from 'vue'
import LogoImg from './components/LogoImg.vue'

// 定义一个耗时执行的函数，t 表示延迟的时间， callback 表示需要执行的函数，可选
const time = (t, callback = () => {}) => {
  return new Promise(resolve => {
    setTimeout(() => {
      callback()
      resolve()
    }, t)
  })
}
// 定义异步组件，这里这样写是为了查看效果
const HelloWorld = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    ;(async function () {
      try {
        await time(2000)
        const res = await import('./components/HelloWorld.vue')
        resolve(res)
      } catch (error) {
        reject(error)
      }
    })()
  })
})
</script>

代码运行结果如下所示：

异步组件的基础展示.gif

当2s后才会加载<hello-world>组件。

您还可以看一下汤小洋老师的全新Vue3.0全家桶零基础入门到项目实战课程中的配置代理服务器实现跨域访问小节, 巩固相关知识点

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^