前端框架御三家之一的 Vue,在 2020 年第四季迎來的第三代版本,代號為 One Piece。雖說已略為上手 2.0 版,決定藉由 HiSKIO 2020 Vue3 專業職人 的課程,來加速自己的熟悉程度。這篇會筆記下如何在 Nuxt 中整合 Vuex 一同使用。
課程相關資訊
[連結]:https://hiskio.com/courses/419/lectures/20851
本篇範圍:Chapter 6 ( Vuex 複習與 API 架構使用 ) ,一共有 10 篇
請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。
筆記
1. 在 store 資料夾中新增 index.js ,並 export vuex 預設的架構出來即可。( 也就是 state, getters, mutations 和 actions )
2. 若你要在 asyncData 裡面使用 vuex,你需要在 context.app.store 來使用
3. 要小心資料流向:當你使用 vuex 來存取資料時,asyncData 階段的 api 所取得的資料,統一先經由存放到 vuex 後,之後再由 computed 的方式取出渲染到畫面上。若是你直接用 return 的方法,再同步存一份到 vuex ,那就容易發生不一致的情況