1. Vuex的安裝及store初始設定
我們需要使用vuex做全局的狀態管理,因此需要再vue的專案中導入vuex
- 透過vue-cli建立
依照Vue-cli 基礎教學,在設定自選的工具 (Manually select feactures)
中,選擇vuex直接導入到專案中
2. 直接安裝到vue專案
- 透過npm安裝
npm install vuex --save
- 使用yarn
yarn add vuex
接著在src
下建立名為store
的資料夾。並在store
底下建立modules
資料夾及名為index.js
的檔案
├─── store
│ ├─── modules // 存放狀態管理相關的模組
│ └─── index.js // store相關設定,導出vuex,最後掛載在Vue實例中
在 store/index.js 內使用Vuex後導出,並掛載到Vue實例
完成Vuex的導入工作後,就可以開始來封裝Vuetify的snackbar了!
2. 封裝Vuetify snackbar,用vuex做訊息內容及狀態的管理
首先在store/modules
內新增snackbar.js
,進行snackbar狀態的全局管理。
- state:管理snackbar的各變數狀態
state: {
msg: '', // snackbar的訊息
visible: false, // 是否顯示snackbar
showClose: true, // 是否顯示關閉按鈕
timeout: 6000, // 顯示後的自動關閉時間
color: 'pink' // 關閉按鈕的顏色
}
- mutations:更改到state的唯一方法
- actions:可以包含異步操作,控制timeout自動關閉的狀態
接著在src/components
底下建立_partial
的資料夾,此資料夾專門放vuetify封裝的全局組件,如snackbar或dialog等。在_partial
底下建立Snackbar.vue
,準備來撰寫snackbar的封裝。
├─── components
│ ├─── _partial
│ │ └─── Snackbar.vue
最後在App.vue
中導入Snackbar的component就大功告成了!
掛載完畢後,只需要透過this.$store.dispatch
就可以成功顯示snackbar!
喜歡的話請留下您的clap clap !
後續有更多前端的文章等著你!