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就能夠了。