開始寫 vue 的時候，首先最好開始理解一下 es6 的寫法，由於我是寫 php 居多，所以當我看到 es6 有 class 還有 extends 的時候，感覺相當熟悉，好像見到了老朋友…，不過幾個同事看到我專案寫一堆 extends 都叫我去寫 React XD….
利用 vue 建立了許多 component 之後，就會發現會遇到很多傳值的問題。
在許多框架裡面，會以 全域狀態管理的模式來管理這些你需要延續傳遞下去的數值，換作原生的 JavaScript 來說，當你遇到變數作用域無法共享的時候，vuex 那就放 WINDOW 的變數一樣，大家都抓的到。
雖然好控，但是所有執行階段的 程式碼都可以呼叫異動到這個塞到 全域的變數，所以當你真的要把變數放到 vuex 的時候，就必須好好考慮其用法，而不是把所有 component 傳遞的參數通通塞到 vuex 裡面，更何況，vue3 提供了許多 component 做資料傳遞的方法，是時候該利用別的方法來傳遞資料了。
我用在哪裡？
我目前在專案中使用 vuex 場景，用於帳號登入紀錄 USER資訊、USER權限資料，路由清單，這些都是經由登入後會改變的使用者資訊以及狀態，採用 module 的方式放在 auth 內
利用 getter 來表示現行資料的狀態，像是表示 token 的狀態，登入的狀態，是否有權限。
getters: {
isLogin: (state) => (state.user ? true : false),
hasToken: (state) => (state.token ? true : false),
hasPermission: (state) => state.permission.size > 0
}isLogin 用於判斷是否登入
hasToken 判定是否有記錄到 token
hasPermission 則是確定是否有取到權限列表
* permission 利用 Map 型別，所以使用 size 驗證長度
路由在進入在 內層 component 之前，根據上述三個參數來判斷並向後端取得相關資訊，後續頁面就能取到需要抓取的資料，像是登入者資訊，以及路由清單。
個人認為能夠貫串全站的資訊，或是整個服務必須要用到的狀態參數，才有必要打入 vuex 內容中，並且分門別類存取。
參考資料：
