• vue-router和vuex的学习总结


    一、vue-router——路由管理

     经过自己的学习加项目总结,针对路由这块内容说下自己的理解:

    路由配置主要有三个关键字:route routes router

    route(单数)表示一条路由,它是一个对象由两部分构成(path——路径;component——组件)

    例如:homeBtn——homeContent(点击homeBtn按钮页面切换到homeContent组件);sideBtn——sideContent;这是两条路由(route)

    如果路由多,这样一条一条表示显然不合理。

    由此出现routes(复数)表示一组路由(路由的数组),上面的两条路由就可以这样表示:

    具体写法:const routes = [{path:'/home',component:homeContent},{path:'/sidebar',component:sidebarContent}]

     router表示路由机制(即路由的管理者),实现原理:点击homeBtn按钮——到routes里去查找到‘/home’对应得组件homeContent,并显示页面。

    写法:const router = new VueRouter({routes:routes}),简写:const router = new VueRouter({routes})

    最后将router实例注入到vue根实例中,便可以使用路由

    import Router from 'vue-router'
    Vue.use(Router)

    配置好路由再定义好路由的出口router-view就可以使用路由实现页面跳转了。

    ps:router-link相当于a标签。

    二、vuex——数据状态管理

    简单说下vuex的作用:主要用于组件直接通讯。比如A和B和C为兄弟组件,组件中都用到name这个字段,A组件中如果对name字段进行更改,那该如何通知B和C组件name字段已经发生变化了呢?这个时候就可以使用Vuex来进行通讯了。先将name存起来(state管理变量初始状态的),A组件中通过触发mutation来通知state中的name发生改变。那么B和C组件就可以从vuex获取state中的name。大概就是这么个意思。

    另外说一下:vuex中的几个关键要素:state、mutation、action以及vuex中自带的函数:mapState、mapMutation、mapAction、mapGetter(都是个人的理解,如有不当请指出。)

    state主要定义一些初始化的变量;

    mutation定义修改State的方法,有两个参数(state、value)

    action定义触发mutation行为的方法;语法:方法名(context)、通过context.commit来触发mutation的方法;

    getter定义获取state的方法,参数state;

    上面内容主要说如何定义这些变量,下面说下如果在组件中使用这些方法:

    第一种情况:设置/修改变量的两种方式:

    a、在计算属性中或方法中调用mutation方法:this.$store.commit(‘方法名’,参数值)

    b、使用action触发mutation方法:this.$store.dispatch(mutaion的方法)

    官方不建议使用a,建议使用b。

    第二种情况:获取参数

    两种方式:1、this.$store.state.参数;2、this.$store.getter.方法名

     使用this.$store.state等这些书写方式太长。所以可以通过vuex的辅助函数:mapState等来简化书写

    辅助函数的使用方法:

    1、mapGetters/apState放在computed属性中。

    书写方式:a、...mapGetters(['Getter定义的方法名'])

                     b、参数如果是count:...mapState({state=>state.count})

    2、mapMutation和mapAction,一般放在method中写:...mapMutation(['mutation定义的方法名'])

    有错误欢迎指正!

  • 相关阅读:
    打印机无法打印文件
    .Net com组件操作excel(不建议采用Com组件操作excel)
    Zebra
    Map遍历方式
    PageHelper原理
    MySQL8.0新特性
    算法_插入排序
    贝叶斯定理
    二叉树学习笔记
    Java校验时间段重叠
  • 原文地址:https://www.cnblogs.com/jennydtt/p/11127777.html
Copyright © 2020-2023  润新知