Vue3 使用Vuex和router的注意事項及操作方法
更新時間：2022年12月12日 12:15:55 作者：無夢南柯
在vue2中 使用的?this.$route?和?this.$router?this.$store的使用在vue3中完全適用，這篇文章主要介紹了Vue3 使用Vuex和router的注意事項及操作方法,需要的朋友可以參考下
使用局部引入的方式$router-$store
在vue2中 使用的 this.$route 和 this.$router this.$store的使用在vue3中完全適用
但是在使用 composition API 的時候肯定是按需引入的 在使用路由 vuex的時候 是import {useRoute} form router在使用的時候就是const store = useStore<這里可以傳入泛型>()然后你如果是需要實時獲取這個vuex的數(shù)據(jù)時候 一般是使用computed的實現(xiàn)
such as：
直接返回vuex中的數(shù)據(jù) const list = computed( () => store.state.columns)
等等的此操作
VueX的getters，算是屬于過濾器
在vuex中
返回state中id大于2的數(shù)量
getters:{
biggerColumnsLen(state){
return state.colums.filter(c => c.id > 2).length
}
}
直接可以使用 state.getters.biggerColumnsLen 可以直接獲取到值
使用時候可以傳入函數(shù)使用
getters:{
getColumnById:(state) => (id:Number)=>{
return state.columns.find(c => c.id === id)
}
}
使用的是時候
按照之前說的使用計算屬性
這樣就可以直接使用的相應(yīng)的getters來獲取數(shù)據(jù)了
const column = computed( ()=> state.getters.getColumnById(currentId))
路由守衛(wèi)
全局前置守衛(wèi)
請求攔截：
1.在請求之前使用展開運算符，將之前的展開，然后在添加的時候直接在后面直接寫上。
2.所以就是在相應(yīng)的修改對象和數(shù)組的時候一般都是使用展開運算符 就是直接把之前的相應(yīng)的放上去，然后把你要修改的和要添加的都放上去
小技巧延時操作
到此這篇關(guān)于Vue3 使用Vuex和router的注意事項的文章就介紹到這了,更多相關(guān)Vue3 使用Vuex和router內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
眾所周知在vue移動端h5頁面當(dāng)中,適配是經(jīng)常會遇到的問題,這篇文章主要給大家介紹了關(guān)于vue項目適配大屏端的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue組件中prop屬性使用說明,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue項目業(yè)務(wù)邏輯，不同的項目有不同的功能，不同的功能需要不同的實現(xiàn)，實現(xiàn)這些核心功能的代碼就叫業(yè)務(wù)邏輯。所以說業(yè)務(wù)邏輯是指一個實體單元為了向另一個實體單元提供服務(wù)，應(yīng)該具備的規(guī)則與流程2022-11-11
這篇文章主要介紹了在vue中如何封裝G2圖表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法
今天小編就為大家分享一篇vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3實現(xiàn)點擊空白區(qū)域隱藏div方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了VUE+Canvas實現(xiàn)財神爺接元寶小游戲,需要的朋友可以參考下本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-04-04
element table列表根據(jù)數(shù)據(jù)設(shè)置背景色
在使用elementui中的el-table時,需要將表的背景色和字體顏色設(shè)置為新顏色,本文就來介紹一下element table列表根據(jù)數(shù)據(jù)設(shè)置背景色,感興趣的可以了解一下2023-08-08
Vue的實例、生命周期與Vue腳手架（vue-cli）實例詳解
本文通過實例代碼+圖片描述的形式給大家介紹了Vue的實例、生命周期與Vue腳手架（vue-cli）知識,需要的朋友可以參考下2017-12-12
關(guān)于element?ui的菜單default-active默認(rèn)選中的問題
這篇文章主要介紹了關(guān)于element?ui的菜單default-active默認(rèn)選中的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05