---
tags: Vue 直播班 - 2021 夏季班
---

# 6/17 線上 Slack 助教

## 今日助教輪班時間

Ryder：6/17 (四)
回覆時間：早上 9:00 -下午 1:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. Echo Hui ：
Ryder 助教你好，想問有關在Vue CLI中使用mitt 套件把資料在元件之間傳送的問題。我的目的是要把購物車頁面和客戶填寫訂單表單的資料頁面分開，要把Cart.vue的this.cart資料以mitt套件emit到CheckOut.vue裡面。以下是我的步驟:
在components資料夾建立emitter.js檔案
在Cart.vue import emitter 並以emitter.emit把this.cart資料發送
在CheckOut.vue 以emitter.on形式接收資料
問題:
我以console log 的方法查看由emitter.on 收到的資料，結果是收到的。但問題是我以 this.cart = data 打算把data放到元件內的資料this.cart，就發現this.cart的狀態一直為空。請問為甚麼不能正確把資料放到完件內呢?
完整程式碼在這裡，這是 github pages
https://github.com/echohuiecho/Vue-hexschool-week6_VueCLI
https://echohuiecho.github.io/Vue-hexschool-week6_VueCLI/#/

> 助教回覆： 這邊是因為同學送出 emitter 的 goToCheckout 時，接收的 CheckOut.vue 這個元件還沒被建立，雖然切換 router 後，console.log() 能夠顯示正確的值，但這種方法對 Vue 來說相當不穩定，多試幾次會發現，有時候會無法顯示 emitter.on('sendCart') 中的 console.log()。
>這邊要達成同學需求，還是會建議同學改由動態路由戴上參數方法，已完成同學這邊的需求喔，詳細可參考[這個章節課程](https://courses.hexschool.com/courses/vue-2021/lectures/31862723)
>

---
2. sec:
Ryder 助教你好, 有几个问题想问
1.由于我使用的是fetch的形式，在后台页面打api的时候header都会加上token验证, 因为每次都要加上token所以我把取得token这段另外写在一个token.js，每次要用时都会import它, 不懂这做法好不好.
2.在pagination.vue的methods内的prePage和nextPage2个方法都是使用解构来取的currentPage, 我记得老师说过的单向数据流是不能更改的但是解构竟然可以?
3.使用async await配合axios是不是有点多余?
https://github.com/SecYJ/Vue-live-week-6

> 助教回覆：
> 1.這麼做沒問題的，實作其實滿常遇到，部分設定單獨切出來，要使用又在 import 拉進來的狀況，只是同學這邊如果使用 axios 其實只要設定一次就好了 XD
>
> 2.這邊是指單向數據流 (props) 進來的值，是無法直接更改的，但當然可以透過解構方法，讓新變數獲得 props 的值哩。解構獲得新值，和不修改 props 的值是沒有衝突的喔。
>
> 3.這邊確實擇一就好，畢竟底層都是 Promise ，但混再一起寫其實也不衝突哩。

---

(這邊只能由助教編輯，問題請到 thread 上詢問)