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.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面通过本文给大家介绍vue.js ajax动态参数与列表显示实现方法，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了Vue八大生命周期钩子函数,生命周期函数，就是在某个时刻会自动执行的函数,本文带你了解八大生命周期钩子函数,一起来看看吧2023-03-03
这篇文章主要介绍了解决elementui导航折叠卡顿的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
今天小编就为大家分享一篇vue路由守卫,限制前端页面访问权限的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Django+vue跨域问题解决的详细步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
今天小编就为大家分享一篇vue-router之nuxt动态路由设置的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持。下面简单记录一下，vue监听数据变化的原理2023-01-01
这篇文章主要介绍了vue中el-input绑定键盘按键(按键修饰符)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
下面小编就为大家分享一篇基于Vue2.X的路由和钩子函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
electron-vue利用webpack打包实现多页面的入口文件问题
项目需要在electron的项目中新打开一个窗口，利用webpack作为静态资源打包器，发现在webpack中可以设置多页面的入口，今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验,需要的朋友可以参考下2019-05-05
最新评论