vue3没有this的解决方案
更新时间：2024年07月12日 08:38:34 作者：苦夏木禾
这篇文章主要介绍了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 方法去获取组件实例来完成一些主要功能，否则在项目打包后，一定会报错的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了vue项目优化之通过keep-alive数据缓存的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了Vue数据驱动模拟实现，教大家如何在某个对象中，新增某个属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了解决vue单页面应用中动态修改title问题,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
这篇文章主要介绍了Vue下拉框值变动事件传多个参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue使用cesium创建数据白模方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue中@click如何绑定多个事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了Vue中使用debugger在浏览器中不起作用的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue集成kindeditor富文本的实现示例代码，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了详解刷新页面vuex数据不消失和不跳转页面的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue中cookies的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论