Vue3.0中如何使用vue-router和vuex

7,038 阅读3分钟

前言:离上次写文章快两个月了,一直没时间停下来记录学习过程,今天记录一下在Vue3.0中如何使用vue-routervuex,顺便填一下上一篇文章留下的坑。

上一篇:初探Vue3.0的响应式原理

刚刚又看了下3.0的进度,已经出了RC版本,那说明正式版马上就要来了,但是像我们这些菜鸡要在生产环境中使用3.0还需要再等一段时间,毕竟周边配套轮子还没完善,自己也没时间去造轮子呀!!(手动滑稽)

好了,那么正式进入正题,首先我们来看路由部分:

vue-router

由于3.0中的没有this的存在,所以不能再使用this.$routerorthis.$route这种语法调用router相关的API, 移步详情。 在3.0中vue-router为开发者提供了两个非常常用的方法useRouteruseRoute,光看名字就知道跟2.0中的this.$routerthis.$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 参数的话,结果依然是小明。好了,今天暂时先写到这里吧。

转载或摘抄须注明出处。