34、vuex初探（二）

摘要： 前言：上一章講了vuex的安裝及引入，這章講下vuex中操作的幾個方法 Dispatch 、 Commit 等，完成整個vuex操作的小迴圈。 GitHub： https://github.com/Ewall1106/mall （選擇分支chapter34） 我再貼一下這張圖，...

前言：上一章講了vuex的安裝及引入，這章講下vuex中操作的幾個方法 Dispatch 、 Commit 等，完成整個vuex操作的小迴圈。

GitHub： ofollow,noindex">https://github.com/Ewall1106/mall （選擇分支chapter34）

我再貼一下這張圖，我們按照這個順序講解：

1、Dispatch

首先我們講在元件中分發 Action ，使用的是 dispatch 這個方法。也就是說如果你想在元件中改變 vuex 倉庫的值，可以使用這個方法。

（1）首先我們再新建一個 testCity.vue 的檔案並與 test.vue 形成互為父子頁面，作為我們這幾章vuex初探的案例測試頁面。

（2）然後我們在 testCity 頁面中用 dispatch 方法分發 action

dispatch

（3）ok，接下來我們就應該是在store倉庫中 註冊 actions

2、Commit

Action 函式接受一個與 store 例項具有相同方法和屬性的 context 物件，因此你可以呼叫 context.commit 提交一個 mutation。

（1）接著上面的來，我們在 changeCity 事件中提交一個 mutation

• 第一個引數是 context 物件；
• 第二個引數是接收元件 dispatch 傳過來的 city 值

這樣，我們就提交了一個mutation。

3、Mutate

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。

終於，到了這一步我們就可以進行 state 狀態的變更了（這一步就是可以改變state的值）

• 我們先註冊一個 mutations ；
• 新建 commit 提交的事件，第一個引數為 state ，第二個為 commit 傳過來的 city 值：

4、小結

最後，當你改變了 state 的值以後，vue就會自動 render 重新渲染元件檢視，從而完成開篇圖1234步驟中的整個小迴圈。

這樣，本章我們就對vuex有了一個初步的瞭解了，最後看看實現的效果：