vue3没有this的解决方案
作者：苦夏木禾
这篇文章主要介绍了vue3没有this的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3没有this怎么办
在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')
}
}
}大家不要依赖 getCurrentInstance 方法去获取组件实例来完成一些主要功能，否则在项目打包后，一定会报错的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。