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就可以了。

时间: 2024-07-29 19:23:51

vuex 管理vue-router的传值的相关文章

04 Vue Router路由管理器

路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发. Vue Router包含的功能有: 支持HTML5 历史模式或hash模式 支持嵌套路由 支持路由参数 支持编程式路由 支持命名路由 vue-router的基本使用 基本使用步骤 1.引入相关的库文件 导入vue文件为全局window对象挂载Vue构造函数

Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

requirejs vue vue router简单框架

index.html 入口页面 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>vue</title>     <link href="../css/index.css" rel="stylesheet">     <script 

Vue系列:Vue Router 路由梳理

Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 1.动态路由 动态路由,可以将某种模式匹配到的所有路由,并全都映射到同个组件. (通俗点,比如根

vue router 导入方式

vue router 的路由导入方式可用以下两种: 一:直接导入 import Hello from '@/components/Hello' @是在webpack.base.conf.js 配置: resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } } 二 :路由懒加载方式 当打包构建应用时,Javascript包会变得非常大

Vue 随笔1-加入vue router 后发现app被渲染了2次

原因:main中已经render了app,在route中不需要再加入app组件了,直接重定向到home即可 main.js import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import routes from './router/router' Vue.config.productionTip = false Vue.use(VueRouter) const router =

一个故事讲懂vue父子组件传值

作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过props属性来实现父组件: <template>  <div id="app">    <child-component v-bind:dataOfChild="dataOfParent"></child-component&

Vue父子组件传值

 Vue父子组件传值:有四种方式:props,ref,emit 和模板传递通信slot 通过props来传值: 静态传值就是直接通过props来传递 动态传值是通过v-bind来绑定一个要传递值的key,然后后面跟要传递的内容,不过这个内容是可以改变的 比如: <input v-model="parentMsg"> <child v-bind:message="parentMsg"></child> 传递的值会跟着input里面输

vue router 参数获取

vue router 参数获取通常是通过$route.query和$route.params方法这里将这两种方式通过代码展示出来: 路由代码: import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import UserAdd from './components/UserAdd' import UserList from './components/UserList'

Vue Router 路由守卫:完整的导航解析流程

完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). 5 在路由配置里调用 beforeEnter. 6 解析异步路由组件. 7 在被激活的组件里调用 beforeRouteEnter. 8 调用全局的 beforeResolve 守卫 (2.5+). 9 导航被确认. 10 调用全局的 afterEach 钩子. 11 触发 DOM 更新. 12 用