筆記: Vue.js 資料傳遞， store方法

架構大概是

A.vue 是 layout 檔案，起始頁面是 A.vue + B.vue(產品列表)的組合，現在要在 B.vue 製作一個

按鈕，可以將被點擊的產品 id 傳遞到 C.vue 的產品詳情頁面，並且跳轉路由使畫面成為

A.vue + C.vue。

失敗經驗：一開始嘗試用 event bus 製作，但始終失敗，推測原因是其中一篇文章說到：

在 C.vue $on 的時候，B.vue已經$emit過了，時間不同，因此跟兩子組件存在同一頁面中的

互傳情況不同。

store 方法：在 src 下建立 store.js ，內容就為將來要傳遞的資料作定義。

numbers 是教學文章中的數字陣列，str是我想傳的物件資料，下方帶上更改資料用的函式。

之後分別套用在 B.vue 以及 C.vue中。

B.vue

import store.js，然後 data 內有欲傳遞的值，template 有一顆啟動 go() 的按鈕就省略不貼了，利

用 store.addStr(x, y) 將 B.vue 中 products[0] 的 id 以及 title 存在 store.js 的 state.str.id 與

state.str.title 裡面，下面補上一個 $router.push ，接著就可以去 C.vue 了。

C.vue

在 import store.js 之後，create 階段就可以檢查資料有沒有正確載入，但要在 template 中顯示

還是需要將 store 裡的資料取出來，如上圖所示，之後在 C.vue 中這些都可以正確顯示啦！

參考資料：

筆記