VueX是適用於在Vue專案開發時使用的狀態管理工具

成員列表：

• state 存放狀態

• mutations state成員操作

• getters 加工state成員給外界

• actions 非同步操作

• modules 模組化狀態管理

首先，Vue元件如果呼叫某個VueX的方法過程中需要向後端請求時或者說出現非同步操作時，需要dispatch VueX中actions的方法，以保證資料的同步。

可以說，action的存在就是為了讓mutations中的方法能在非同步操作中起作用。

如果沒有非同步操作，那麼我們就可以直接在元件內提交狀態中的Mutations中自己編寫的方法來達成對state

注意，不建議在元件中直接對state中的成員進行操作，這是因為直接修改(例如：this.$store.state.name = 'hello')的話不能被VueDevtools所監控到。

最後被修改後的state成員會被渲染到元件的原位置當中去。

state

通過this.$store.state.屬性名來獲取,但是不能進行修改

mutations方法都有預設的形參：

([state] [,payload])

• state是當前VueX物件中的state
• payload是該方法在被呼叫時傳遞引數使用的

在元件內呼叫則是this.$store.commit('方法名',引數)

Actions

由於直接在mutation方法中進行非同步操作，將會引起資料失效。所以提供了Actions來專門進行非同步操作，最終提交mutation方法。

Actions中的方法有兩個預設引數

• context 上下文(相當於箭頭函式中的this)物件
• payload 掛載引數

在元件內呼叫則是this.$store.dispatch('方法名',引數)

由於是非同步操作，所以我們可以為我們的非同步操作封裝為一個Promise物件