深入Vue3学习vue-router vuex

Posted lin_fightin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入Vue3学习vue-router vuex相关的知识,希望对你有一定的参考价值。

vue-router

meta属性
meta属性,后续可以通过route.meta拿到里面的值。

router hooks


这两个就是在setup中拿到的,相当于this.$route this. $router

匹配未找到路由

当输入的路由在配置中没有的时候会匹配到这个component中。

router-link的tag

vue2的router-link可以通过tag属性,决定router-link渲染成什么形式。
而vue3通过插槽:


甚至可以放一个组件。


router-view的作用域插槽

动态添加路由(开发常用)


可以根据一些权限管控来动态添加路由
这样是添加顶级路由对象。
添加二级路由:
接受两个参数,

删除

1 添加一个相同Name的路由
2 通过removeRoute的方法,传入路由的名称
3 通过addRoue的返回值调用。

路由导航守卫

全局前置守卫boforeEach是在导航触发时调用的。



next在第四版已经不被推荐了。
现在通过返回值代替next了。

其他导航守卫

组件内守为,路由独享守卫

导航解析过程


可以看到,先调用失活组建的beforeRouteLeact,再调用全局的beforeEach…
注意的一点是,再beforeOruteEnter中时拿不到this的,所以通过最后组件创建完调用next的回调函数,将组件实例传进去。

Vuex

在setup中的使用
useStrore hooks

基本使用

mapState用法


使用

mapState返回的是一个函数,所以必须使用调用的方式使用他,然后传入store才能正常使用。
我们可以借助computed

还是需要绑定store,借助computed,因为compunted就是传入一个函数的。然后将值解构出去即可。

所以我们封装一下这个函数

使用的时候

封装useState

getter


mapGetters

用法与mapState差不多

我们也跟着mapState一样封装一下

同样调用UseMapper即可。

Mutations

基本使用


因为mapMutations不用绑定this,所以直接使用即可,不用封装。


效果相当于


因为setAbout是在about模块下的,所以前面要加模块。

actions

vuex的actions一般是用来做异步操作的,比如网络操作,所以我们必须通过dispatch acitons再commit mutation去修改state,有点像redux的dispatch redux-thunk actons,然后再去dispatch普通的actions再去触发reducer修改state的值。

这是模块about中的acitons,里面的context表示当前模块的store。
可以看到acitons里面是直接Commit去触发mutation再去修改state的值。



效果相当于


mutation是commit,acitons是dispatch

mapState mapGetters mapActions mapMutation

都可以接受一个对象,比如

用键值对代替数组,效果是一样的,

module的相对使用

当我们项目日益庞大的时候,一个state明显不够用,所以才有了模块的诞生。每个模块对应一个子store,他也有自己的state,actions,getter…

about就是一个模块,获取的时候其实也算是根state的一个属性,比如上面的about
只需要通过store.state.about就可以获取about这个store。

模块注意点

一 如果根store和一个模块store有一样命名的Mutation或者actions,一旦dispatch或者commmit,都会触发根store与模块store的改变。

如何解决呢?在命名空间的namespace属性设为true。

然后在commitd的时候,

在前面加上模块,当然也可以


通过这样的方式拿到模块的actions或者mutations。
而如果想在模块的acitons中commit根的mutation呢?
commit(‘xx’, null, {root: true})只需要加第三个属性表示commit的mutation为root的。

二 模块的getter不能通过store.state.about.getters来获取。而是直接通过store.getters.xxx来获取,因为getters被合并到一起了。而开启namespace为true的情况下只能通过


再前面加上具体的模块才能获取。

也可以通过这种

只要是使用我们封装的useGetters即可。

可以看到getters和actions是有rootgetters和rootState这两个属性拿到全局的东西。

moduel的辅助函数

mapState mapMutation mapGetters mapActions都是辅助函数
而模块的写法除了,


还有通过对象


但是没有 MapState([xx/xx])这种写法。
也可以通过createNamespaceHelpers来帮助。

这些就是模块的辅助函数。帮助你直接获取哪些模块的mapXxxx方法。

以上是关于深入Vue3学习vue-router vuex的主要内容,如果未能解决你的问题,请参考以下文章

vue3.0+ts+element-plus多页签应用模板:头部工具栏(中)

Vue学习😀

Vue3“在'vue-router'中找不到导出'createWebHistory,createRouter'

vue3.0需要学习的技术栈

在 Vue3 和 Vue-router 中获取当前路由的最佳方法?

Vue3的vue-router路由详解