vuex 管理vue-router的传值
假设有这样的一种情况,在两个组件中。一个组件【A】主要是比如说放表格数据,而另外一个组件【B】是专门用来向组件A的表格添加数据的表单。这个时候就是两个兄弟组件之间传递数据了。首先想到的是使用兄弟组件传递数据的方法:
新建一个中间件(eventBus.js),即一个空的Vue对象。这个对象用来在兄弟组件之间传递数据。在B组件中触发事件,并且暴露数据。而在A组件中去接收B组件暴露的数据,使用如下
B:
--------------------------------------------------------------
import bus from "eventBus.js";
....................
bus.$emit("formData",this.formData);
--------------------------------------------------------------------------
B组件中的$emit()方法的第一个参数是向外暴露的"钩子事件"<我暂且这么理解..>。第二个参数就是暴露的数据。
A:
-----------------------------------------------------------------
import bus from "eventBus.js";
............
bus.$on("formData",(res)=>{
console.log(res);
})
-----------------------------------------------------------------------
这个时候没有疑问的得到了B传递过来的数据。也可以此时赋值给A组件中你自己定义好的data。但是如果和router结合使用的话,变成这种:
B:
--------------------------------------------------------------
import bus from "eventBus.js";
....................
bus.$emit("formData",this.formData);
this.$router.push("/a");
--------------------------------------------------------------------------
A:
-----------------------------------------------------------------
import bus from "eventBus.js";
............
bus.$on("formData",(res)=>{
console.log(res);
})
-----------------------------------------------------------------------
这种情况下,在A组件的$on中可以得到res的值,但是无法添加到当前组件的data中。我也感觉到很郁闷。尝试了很多次修改再修改都没有效果。只能转变思路。往router的跳转上去思考。router除了跳转到相应的路径。还可以携带params/query。而这个我需要params。于是就有了再次修改AB组件
B:
--------------------------------------------------------------
import bus from "eventBus.js";
....................
bus.$emit("formData",this.formData);
this.$router.push({
path:"/a",
params:{
formData:this.formData
}
});
--------------------------------------------------------------------------
A:
import bus from "eventBus.js";
mounted(){
var params=this.$route.params.formData;
this.data.push(params);
}
this.data 是A组件中的data表格数据, 是一个数组的形式。
问题,看似解决了吗?? 点击添加的时候,form表单中的数据是添加到table当中了。但是有一个很大的问题。无论你添加多少条数据,都只能添加进一条进table。一看mounted中的代码。当从B转到A的时候,这个A中的data并不是之前已经添加过一次form表单的data,而是它自身的data数据。每次mounted的时候,data数据都是一样的。所以只能添加一条进table中。
------------------------------------------------------------------------------------------------------
最后!这个数据需要全局的。所以得用vuex来管理。在vuex的state中定义好data数据(数组)。
当提交数据的时候,把form表单的数据传递到vuex中。
action.js
mutations.js
getters.js
最后在A组件中调用getters中的entryDatas就可以了。
更多专业前端知识,请上 【猿2048】www.mk2048.com
vuex 管理vue-router的传值相关推荐
- Vue 学习(十、 Vue Router - 路由插件 和 Vue 的插件原理)
文章目录 一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
- vuex构建vue项目_如何使用Vue.js,Vuex,Vuetify和Firebase构建单页应用程序
vuex构建vue项目 如何使用Vuetify和Vue路由器安装Vue并构建SPA (How to install Vue and build an SPA using Vuetify and Vue ...
- VueX(Vue状态管理模式)
一.初识VueX 1.1 关于VueX VueX是适用于在Vue项目开发时使用的状态管理工具.试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护 ...
- Vue 2.0 + Vue Router + Vuex 后台管理系统的骨架
https://github.com/helloyoucan/ba 用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node ...
- Vue Router 路由管理
文章目录 Vue Router 路由管理 概述 安装 简单使用 定义2个组件 定义路由信息 支持路由 使用路由 动态路由 配置动态路由 配置404 限制动态参数 嵌套路由 命名路由 编程式导航 简单使 ...
- vue父子组件传值 简单了解vuex
一.vue的父子组件之间是如何传值的? 首先呢,需要说说的是,vue既然有双向绑定,那为何会有父子组件之间的传值问题?这个问题也简单,vue的组件会供其他的vue页面进行调用,如果数组都是双向绑定的话 ...
- Vue+Vue Router+Vuex页面演示
Vue+Vue Router+Vuex简单页面演示 1.目录结构(使用vue-cli创建) 2.编写代码 src/router/index.js import Vue from "vue&q ...
- Vue中路由管理器Vue Router使用介绍(三)
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 {path:'/user/:id/:name', ...
- Vue Router路由管理器
目录: 相关理解 基本路由 几个注意事项 嵌套(多级)路由 路由的query参数 命名路由 路由的params参数 路由的props配置 路由跳转的replace方法 编程式路由导航 缓存路由组件 a ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
最新文章
- JavaScript高级程序设计(第3版)非扫描版
- 天涯共此式 有AI月更圆
- C++实现线程安全的单例模式
- python观察日志(part2)--牛顿法计算平方根
- mysql 语句账号注入_mysql中SQL语句的注入问题
- selenium自动化案例(二)滑动验证码破解
- npm的常用操作---npm工作笔记003
- 6月第二周国内域名解析商Top10:万网份额突破21%
- [Android Studio]-基本快捷键大全
- 小米air2se耳机只有一边有声音怎么办_小米蓝牙耳机Air2 SE,169元是否值得购买?值...
- python 文件操作OS总结
- Android小钢琴
- 使用BeanUtils.populate遇到的bug
- Circular-Circular 和 Circular-Linear Regression
- 大盘点 | 性能最强的目标检测算法
- 爬取全球疫苗接种信息可视化分析(已修改)
- 针对各组的意见,除评论员外的四个人的反思和改进
- 软件测试之使用jmeter进行压力测试
- 移动端excel导出_手机联系人竟可导出到Excel?教你要如何做
- 要想提高工作效率,请拒绝做这 7 种事