vue全家桶之vue-router和vuex

2023-01-24 0 1,145

01vue-router

1、条码重定向router-link在html条码内采用router-link重定向,适当于源文件a条码,采用形式如下表所示:

<router-link to=”/”>[表明表头]</router-link>

to:导航系统方向

router-link还能同时实现传参:

<router-link :to=”{name: one, params:{username:test123}}”>子网页1</router-link>

路由器特性实用性表明:

vue全家桶之vue-router和vuex

2、编程式导航系统-js代码内部重定向

(1)先编写一个按钮,在按钮上绑定goHome( )方法。

<button @click=”goHome”>回到首页</button>

(2)在<script>模块里加入goHome方法,并用this.$router.push(‘/’)导航系统到首页

export default {name: app, methods: {goHome(){ this.$router.push(/home); } }}

3、其他用法// 后退一步记录,等同于 history.back()this.$router.go(-1)// 在浏览器记录中前进一步,等同于 history.forward()this.$router.go(1)

4、子路由器(路由器嵌套)子路由器,也叫路由器嵌套,采用在children后跟路由器数组来同时实现,数组里和其他实用性路由器基本相同,需要实用性path和component,然后在适当部分添加<router-view/>来展现子网页信息,相当于嵌入iframe。

02vuex

vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以适当的规则保证状态以一种可预测的形式发生变化。

vuex单向数据流

vue全家桶之vue-router和vuex

State:驱动应用的数据源(单向数据流)

View:以声明形式将 state 映射到视图(静态表明出来的数据源)

Actions:处理用户在view上面操作而导致的状态变化(数据源变化追踪)。

vuex解决的问题多个视图组件,包括父子组件,兄弟组件之间的状态共享

不同视图组件的行为需要变更同一个状态

vuex采用场景中大型单页应用,需要考虑如何更好地在组件外部管理状态,简单应用不建议采用

vuex与全局变量的区别响应式:vuex的状态存储是响应式的,当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么适当的组件也会得到高效更新

不能直接改变store:不能直接改变store的变化,改变store中状态的唯一途径是commit mutation,方便于跟踪每一个状态的变化

vuex核心流程

vue全家桶之vue-router和vuex

示意图表明:

Vue Components:Vue组件。HTML网页上,负责接收用户操作等交互行为,执行dispatch方法触发对应action进行回应

Dispatch:操作行为触发方法,是唯一能执行action的方法

Actions:操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作,支持多个同名方法,按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行,包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装,以支持action的链式触发

Commit:状态改变提交操作方法。对mutation进行提交,是唯一能执行mutation的方法

Mutations:状态改变操作方法。是Vuex修改state的唯一推荐方法,其他修改形式在严格模式下将会报错。该方法只能进行同步操作,且方法名只能全局唯一。操作之中会有一些hook暴露出来,以进行state的监控等

State:网页状态管理容器对象。集中存储Vue components中data对象的零散数据,全局唯一,以进行统一的状态管理。网页表明所需的数据从该对象中进行读取,利用Vue的细粒度数据响应机制来进行高效的状态更新

Getters:state对象读取方法。图中没有单独列出该模块,应该被包含在了render中,Vue Components通过该方法读取全局state对象

总结表明Vue组件接收交互行为,调用dispatch方法触发action相关处理,若网页状态需要改变,则调用commit方法提交mutation修改state,通过getters

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务