vue3没有this怎么办?

最新推荐文章于 2025-06-01 20:39:27 发布

哥很冷漠

最新推荐文章于 2025-06-01 20:39:27 发布

阅读量1.1k

点赞数 8

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_63608386/article/details/136570494

文章讲述了在Vue3的新API中如何在setup中处理this的问题，推荐使用`getCurrentInstance`获取实例的proxy来间接访问router和vuex，但强调不建议这样做，提倡在setup中使用计算属性(computed)、store、route和router的导出函数，以避免在打包后可能遇到的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue3中,新的组合式API中没有this,那我们如果需要用到this怎么办?

解决方法:
getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 或 proxy 属性获得当前上下文，这样我们就能在setup中使用router和vuex了

import { getCurrentInstance } from "vue";
export default {
	setup() {
    	let { proxy } = getCurrentInstance();
    	proxy.$axios(...)
    	proxy.$router(...)
    }
}

但是
但是,不建议使用,如果要使用router和vuex,推荐这样用:

import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
export default {
  setup () {
    const store = useStore()
	const route = useRoute()
    const router = useRouter()
    return {
      // 在 computed 函数中访问 state
      count: computed(() => store.state.count),

      // 在 computed 函数中访问 getter
      double: computed(() => store.getters.double)

	  // 使用 mutation
      increment: () => store.commit('increment'),

      // 使用 action
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}