Vue專案中Vuex + Vuetify封裝設計

Vuetify是Vue中很多人會選擇的UI Framework。但Vuetify中沒有類似Element中直接掛在原型中的訊息框(message)，因此必須自行封裝提示訊息時需要設計組建的傳值，以及snackbar (vuetify訊息框名稱) 的打開/關閉狀態等。

本篇會學習到的知識：

1. Vuex的安裝及store初始設定
2. 封裝Vuetify snackbar，用vuex做訊息內容及狀態的管理

1. Vuex的安裝及store初始設定

我們需要使用vuex做全局的狀態管理，因此需要再vue的專案中導入vuex

1. 透過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 ！

後續有更多前端的文章等著你！