vue3沒有this的解決方案
更新時間：2024年07月12日 08:38:34 作者：苦夏木禾
這篇文章主要介紹了vue3沒有this的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3沒有this怎么辦
在vue3中，新的組合式API中沒有this，那我們?nèi)绻枰玫?code>this怎么辦?
解決方法
getCurrentInstance 方法獲取當(dāng)前組件的實例，然后通過 ctx 或 proxy 屬性獲得當(dāng)前上下文，這樣我們就能在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 函數(shù)中訪問 state
count: computed(() => store.state.count),
// 在 computed 函數(shù)中訪問 getter
double: computed(() => store.getters.double)
// 使用 mutation
increment: () => store.commit('increment'),
// 使用 action
asyncIncrement: () => store.dispatch('asyncIncrement')
}
}
}大家不要依賴 getCurrentInstance 方法去獲取組件實例來完成一些主要功能，否則在項目打包后，一定會報錯的。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中使用protobuf踩坑記，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue3+TS實現(xiàn)動態(tài)路由權(quán)限的示例詳解
當(dāng)我們在開發(fā)一個大型的前端應(yīng)用時,動態(tài)路由權(quán)限是一個必不可少的功能,本文將介紹如何使用Vue 3和TypeScript來實現(xiàn)動態(tài)路由權(quán)限,希望對大家有所幫助2024-01-01
本文主要介紹了Vue?編程式路由導(dǎo)航2022-04-04
Vue異步請求導(dǎo)致頁面數(shù)據(jù)渲染錯誤問題解決方法示例
這篇文章主要為大家介紹了Vue中異步請求導(dǎo)致頁面數(shù)據(jù)渲染錯誤問題解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
今天小編就為大家分享一篇淺談vue-router路由切換 組件重用挖下的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
微信、支付寶支付密碼時的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實現(xiàn)?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要給大家介紹了關(guān)于Vue3中ref的用法舉例總結(jié)的相關(guān)資料,ref()接受一個內(nèi)部值,返回一個響應(yīng)式的可更改的ref對象,此對象只有一個指向其內(nèi)部值的屬性.value,需要的朋友可以參考下2023-10-10
vue中實現(xiàn)先請求數(shù)據(jù)再渲染dom分享
下面小編就為大家分享一篇vue中實現(xiàn)先請求數(shù)據(jù)再渲染dom分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于Vue.js的復(fù)用組件開發(fā)流程的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了vue時間轉(zhuǎn)換的幾種方式,需要的朋友可以參考下2022-05-05