中央状态指挥中心- Vuex [序]

什麽是 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...

每日一句:
最後一个冲刺假日