[TOC]
## 要點
通過action 開發一個事件
通過commit 傳給 mutations 改變數據
store里的數據可以直接在vue里使用
## vuex
### 1.組件派發一個事件給vuex的actions
```
methods:{
handleClick(event){
this.$store.dispatch("changeLetter",event.target.innerText)
}
}
```
### 2.在vuex中接收傳遞過來的事件
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
letter:""
},
mutations: {
},
actions: {
<!-- 在這里接收 -->
changeLetter(ctx,letter){
<!-- ctx表示上下文，letter傳遞過來的參數 -->
ctx.commit("changeLetter",letter)
}
}
})
```
### 3.將actions中傳遞過來的數據，commit給mutations
```
mutations: {
changeLetter(state,letter){
//state表示vuex里的state ，letter是actions傳遞過來的參數
state.letter = letter
}
},
```
### 4.在頁面中直接使用
```
{{this.$store.state.letter}}
```
### 5.通過計算屬性的到letter
```
computed:{
letter(){
return this.$store.state.letter
}
},
```
### 6.通過watch屬性偵聽letter的變化
```
watch:{
letter(){
let element = this.$refs[this.letter][0]
this.scroll.scrollToElement(element)
}
}
```
##簡化vuex
### 不派發給actions 直接派發給 mutations
this.$store.commit("changeLetter",event.target.innerText)
省略步驟2
