[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
