這篇會介紹 Vuex 的基本名詞以及他們的差異!

在撰寫 Vue 專案的過程中,時常會遇到多個檔案需要使用同樣變數的情況,而變數雖然可以透過 props 或 emit 的形式來傳遞,但卻也變得麻煩許多。

因此,這時候就出現了 Vuex 來解決這個問題!

目錄

State

- 儲存全域變數的地方
```javascript
state: {
    count: 0
}
```

Mutation

- 能改變state的唯一一個地方
- 函式形式
```javascript
mutation: {
    increment(){
        state.count++;//直接改變state裡的變數
    }
}
```

Action

- 在 .vue 裡可以用 store.dispatch()的方式呼叫這邊的函式
- 函式形式
```javascript
action: {
    increment (context) {
        context.commit('increment')//會做mutation的函式
    }
}
```

Vue2 和 Vue3 生命週期名稱的差異