前言:离上次写文章快两个月了,一直没时间停下来记录学习过程,今天记录一下在Vue3.0中如何使用
vue-router
和vuex
,顺便填一下上一篇文章留下的坑。
刚刚又看了下3.0的进度,已经出了RC版本,那说明正式版马上就要来了,但是像我们这些菜鸡要在生产环境中使用3.0还需要再等一段时间,毕竟周边配套轮子还没完善,自己也没时间去造轮子呀!!(手动滑稽)
好了,那么正式进入正题,首先我们来看路由部分:
vue-router
由于3.0中的没有this
的存在,所以不能再使用this.$router
orthis.$route
这种语法调用router
相关的API, 移步详情。
在3.0中vue-router
为开发者提供了两个非常常用的方法useRouter
和useRoute
,光看名字就知道跟2.0中的this.$router
和this.$route
的相对应的,下面是比较常用的用法:
useRouter
// html 部分
//<button @click="changeView"> 跳转路由</button>
import {useRouter} from 'vue-router'
export default {
setup() {
const router = useRouter()
const changeView = () => {
router.push({
path:'/targetPage',
query:{name:'lq9958'}
})
}
return {
changeView
}
}
}
当我们点击按钮即可跳转到响应路由。
useRoute
// targetPage
import {useRoute} from 'vue-router'
import {onBeforeMount} from 'vue'
export default {
setup() {
const route = useRoute()
onBeforeMount(() => {
console.log(route.query) // {name: "lq9958"}
})
}
}
其实使用方法挺简单的,从2.x过渡到3.0真的是有手就行。
Vuex
vuex
的使用和vue-router
一样,直接上代码:
useStore
// 接着上一例子代码,我们需要将路由参数中的name属性值存入state的userName属性中
// targetPage
import {useRoute} from 'vue-router'
import {onBeforeMount} from 'vue'
import {useStore} from 'vuex'
export default {
setup() {
const route = useRoute()
const store = userStore()
onBeforeMount(() => {
console.log(route.query) // {name: "lq9958"}
const userName = router.query.name
/** 下面是调用actions中的changeUserName来修改state中的userName,
由于store中的写法和2.x中一毛一样,所以这里直接省略了,
想测试同学需要手撸一个简单的store*/
store.dispatch('changeUserName',userName)
})
}
}
接下来我们来填一下上一期留下的坑。
上一期中的简单讲了一下3.0的响应式原理,其中提到了3.0源码中在Proxy
代理handler中的调用了Reflect
对应的方法。当时理解有误,下面重新整理一下:
话不多说,先上代码
let obj = {
_name:'小明',
get name() {
return this._name
}
}
let proxy = new Proxy(obj,{
get(target,key,reciver) {
// return target[key]
return Reflect.get(target,key,receiver)
}
})
let obj2 = {
__proto__:proxy,
_name:'小红'
}
console.log(obj2.name) // ??
运行上面代码,再把上面的注释放开再打印一下,然后对比两次结果,可以发现两次结果是不一样的,为什么?很简单,当我们直接使用return target[key]
时,在我们打印 obj2.name
时,会在当前对象上面找有没有name
属性,如果没有就根据原型链向下查找,这里我们将原型链指向 proxy 对象,显然输出的会是 小明
。但当我们使用 return Reflect.get(target,key,receiver)
时,输出结果却是小红
,为什么?当我们调用Reflect.get(target,key,receiver)
时,操作的对象并不是 target,而是 receiver ,这里的 receiver 正是obj2 对象,可以理解为当传入 receiver 参数时,是为了保持this的正确指向,如果在调用中不传入 receiver 参数的话,结果依然是小明
。好了,今天暂时先写到这里吧。
转载或摘抄须注明出处。