vuex 管理vue-router的传值

柔情只为你懂 2023-06-11 03:15 12阅读 0赞

假设有这样的一种情况，在两个组件中。一个组件【A】主要是比如说放表格数据，而另外一个组件【B】是专门用来向组件A的表格添加数据的表单。这个时候就是两个兄弟组件之间传递数据了。首先想到的是使用兄弟组件传递数据的方法：

![1156795-20171212123653129-719841204.png][]

新建一个中间件(eventBus.js)，即一个空的Vue对象。这个对象用来在兄弟组件之间传递数据。在B组件中触发事件，并且暴露数据。而在A组件中去接收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结合使用的话，变成这种:**

--------------------------------------------------------------

**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组件

--------------------------------------------------------------

**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数据（数组）。

![1156795-20171212131425176-1524015695.png][]

当提交数据的时候，把form表单的数据传递到vuex中。

**action.js**

**![1156795-20171212131642394-175329249.png][]**

**mutations.js**

**![1156795-20171212131717613-1915008934.png][]**

getters.js

![1156795-20171212131739285-1035976532.png][]

最后在A组件中调用getters中的entryDatas就可以了。

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[1156795-20171212123653129-719841204.png]: /images/20230531/2b603d745b7040308fd75d86070e0684.png
[1156795-20171212131425176-1524015695.png]: /images/20230531/2d01c3b3c837409998300801bfd3bb7b.png
[1156795-20171212131642394-175329249.png]: /images/20230531/caab950b5720464496454188d3e59fc7.png
[1156795-20171212131717613-1915008934.png]: /images/20230531/c4504983a4f84869b35194351e2ded10.png
[1156795-20171212131739285-1035976532.png]: /images/20230531/a2a92cf3e0314d02a35a8e76e6114012.png