前言

使用 Vuex 時我們一定會想到説可以應用在帳號登入，紀錄一些使用者的資訊，這邊我們來試著做一個帳號登入的功能。

Watch

使用 watch 是用來監控指定的資料變化時，觸發相對應的行為，要監控一般的參數很簡單，但是要監控物件裡面的屬性呢？以下是解決的方式：

module

由於購物車與商品各自有許多不同的函數，為了未來維護上方便，我們將其拆成獨立的檔案，這樣在 store 中就不會一次出現很長一串的程式碼，這裡我們以 products 來做範例。

Mock API

在 api/shop.js 的文件中我們可以看到模擬的 API ，要注意在 buyProducts 這個函數中，因為要模擬失敗或是成功的結果，所以會用亂數來決定結果。

前言

前面我們已經把 Vuex 的特性都解說完畢，應該對 Vuex 有初步的了解，但是如果沒有實作我們還是沒有辦法很熟悉，官方這邊提供了一個購物車的範例，我們就以此來看看要如何將 Vuex 應用在購物車中。

 基本使用

安裝 iTerm 2

表單處理

當在嚴格模式中使用 Vuex 時，state 使用在 v-model 時會遇到問題：

嚴格模式 Strict Mode

開啟嚴格模式只需要在建立 store 時傳入 strict: true 。

插件（Plugin）

Vuex 的 store 接受 plugins 選項，這個選項露出每個 mutation 的鉤子 (hook)， Vuex 插件就是一個函數，他接收 store 作為唯一參數，我們用以下範例來解釋。

專案結構

Vuex 並不限制你的程式碼結構，但仍然有規定了一些需要遵守的規則：