Vue3中如何在setup中调用方法？实例方法调用报错解决方案

你遇到的核心问题是Vue3的setup函数里的this和选项式API里的this不是一回事——setup执行时组件实例还没完全创建，所以this是undefined，自然找不到methods里的loadCategories；而直接调用的话，setup的作用域里根本没有这个函数，所以也会报错。

要让loadCategories能在多处调用，推荐两种靠谱的实现方式：

方案一：完全使用组合式API（更符合Vue3的设计思路） #

把数据和方法都移到setup里，用ref/reactive声明响应式数据，这样方法可以直接在setup内部调用，还能导出给模板或其他地方复用：

<script>
import appMixin from '@/appMixin'
import axios from 'axios'
import mitt from 'mitt'
import { onMounted, ref } from 'vue'

const emitter = mitt()

export default {
  name: 'adminCategoriesList',
  mixins: [appMixin],
  setup () {
    // 用ref声明响应式数据，替代原来的data
    const categoriesPerPage = ref(20)
    const currentPage = ref(1)
    const categoriesTotalCount = ref(0)
    const categories = ref([])

    // 把loadCategories移到setup里，直接访问响应式数据
    const loadCategories = async () => {
      // 这里写原来的axios请求逻辑，比如：
      try {
        const res = await axios.get('/api/categories', {
          params: {
            page: currentPage.value,
            limit: categoriesPerPage.value
          }
        })
        categories.value = res.data.list
        categoriesTotalCount.value = res.data.total
      } catch (err) {
        console.error('加载分类失败：', err)
      }
    }

    const adminCategoriesListInit = async () => {
      await loadCategories() // 直接调用，不用this
    }

    function onSubmit (credentials) {
      alert(JSON.stringify(credentials, null, 2))
      // 如果需要在这里调用loadCategories，直接写就行
      // loadCategories()
    }

    onMounted(adminCategoriesListInit)

    // 导出需要在模板或其他地方用的数据和方法
    return {
      categoriesPerPage,
      currentPage,
      categoriesTotalCount,
      categories,
      loadCategories,
      onSubmit
    }
  }
}
</script>

这样loadCategories既可以在adminCategoriesListInit里调用，也能在onSubmit或者模板里直接使用，完全符合Vue3组合式API的使用习惯。

方案二：保留选项式API的methods（过渡方案） #

如果不想重构代码，想继续用选项式的methods，可以通过getCurrentInstance获取组件实例，然后调用实例上的方法：

<script>
import appMixin from '@/appMixin'
import axios from 'axios'
import mitt from 'mitt'
import { onMounted, getCurrentInstance } from 'vue'

const emitter = mitt()

export default {
  name: 'adminCategoriesList',
  mixins: [appMixin],
  data: function () {
    return {
      categoriesPerPage: 20,
      currentPage: 1,
      categoriesTotalCount: 0,
      categories: []
    }
  },
  setup () {
    // 获取组件实例
    const instance = getCurrentInstance()

    const adminCategoriesListInit = async () => {
      // 通过实例访问methods里的方法
      await instance.proxy.loadCategories()
    }

    function onSubmit (credentials) {
      alert(JSON.stringify(credentials, null, 2))
      // 同样可以在这里调用
      // instance.proxy.loadCategories()
    }

    onMounted(adminCategoriesListInit)

    return {
      onSubmit
    }
  },
  methods: {
    async loadCategories() {
      // 原来的请求逻辑
      try {
        const res = await axios.get('/api/categories', {
          params: {
            page: this.currentPage,
            limit: this.categoriesPerPage
          }
        })
        this.categories = res.data.list
        this.categoriesTotalCount = res.data.total
      } catch (err) {
        console.error('加载分类失败：', err)
      }
    }
  }
}
</script>

注意：getCurrentInstance主要用于库开发，业务代码里尽量用方案一的组合式API，更清晰也更符合Vue3的最佳实践。

总结一下：Vue3里尽量统一使用组合式API或者选项式API，不要混用导致作用域混乱，这样方法的调用就不会有问题啦～

内容的提问来源于stack exchange，提问作者mstdmstd