什麼是 Vuex ?

為 Vue.js 開發的狀態管理模式，集中管理元件的狀態。

像是電商網站中的購物車，跟全站十分緊密，商品數量增減、商品新增移除等等。Vuex 提供 Store ，類似 window 物件一樣，供元件去存取。

單向資料流

要更動 state 時，透過 actions 發出 commit 去呼叫 mutations，mutations 再去更改 state，整個這樣的方法稱為 store。

圖取自What is Vuex?

• state 物件，包含所有應用程式的狀態　(可以是任何變數以及陣列)
• mutations 物件，更改狀態時使用的方法
  • 同步的操作
• actions 物件，用來呼叫 mutation 的方法
  • 用來做非同步的操作

來個基本範例

stor 像是一個中央倉庫般的存在，分享在 App 中的狀態。

// src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

利用 store.state 取得狀態物件，並使用state.commit 觸發狀態改變

store.commit('increment')

console.log(store.state.count) // -> 1

未完待續的 Vuex...

每日一句:
最後一個衝刺假日