欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3 使用Vuex和router的注意事項(xiàng)及操作方法

 更新時(shí)間：2022年12月12日 12:15:55   作者：無夢南柯  
在vue2中 使用的?this.$route?和?this.$router?this.$store的使用在vue3中完全適用，這篇文章主要介紹了Vue3 使用Vuex和router的注意事項(xiàng)及操作方法,需要的朋友可以參考下

使用局部引入的方式$router-$store

在vue2中 使用的 this.$route 和 this.$router this.$store的使用在vue3中完全適用
但是在使用 composition API 的時(shí)候肯定是按需引入的 在使用路由 vuex的時(shí)候 是
import {useRoute} form router在使用的時(shí)候就是
const store = useStore<這里可以傳入泛型>()然后你如果是需要實(shí)時(shí)獲取這個(gè)vuex的數(shù)據(jù)時(shí)候 一般是使用computed的實(shí)現(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í)候可以傳入函數(shù)使用

getters:{
	getColumnById:(state) => (id:Number)=>{
		return state.columns.find(c => c.id === id)
	}
}
使用的是時(shí)候
按照之前說的使用計(jì)算屬性
這樣就可以直接使用的相應(yīng)的getters來獲取數(shù)據(jù)了
const column = computed( ()=> state.getters.getColumnById(currentId))

路由守衛(wèi)

全局前置守衛(wèi)

請(qǐng)求攔截：

1.在請(qǐng)求之前使用展開運(yùn)算符，將之前的展開，然后在添加的時(shí)候直接在后面直接寫上。
2.所以就是在相應(yīng)的修改對(duì)象和數(shù)組的時(shí)候一般都是使用展開運(yùn)算符 就是直接把之前的相應(yīng)的放上去，然后把你要修改的和要添加的都放上去

小技巧延時(shí)操作

到此這篇關(guān)于Vue3 使用Vuex和router的注意事項(xiàng)的文章就介紹到這了,更多相關(guān)Vue3 使用Vuex和router內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論