**word.vue** ``` <li v-for="item of word" :key="item.id" @click="handleClick">{{item}}</li> ``` 派发事件给vuex，并传值 ``` methods: { handleClick(event){ this.$store.dispatch("changeLetter",event.target.innerText); } }, ``` **** **store.js** 接收传递进来的值和事件并将使用commit事件把值派发给mutation >[danger]action是个动作，无法改变数据，所以需要传递到mutation中 ``` actions: { changeLetter(ctx,letter){ ctx.commit("changeLetter",letter); } } ``` 接收该事件，并改变state中的letter数据值 >[danger]state中的值可以直接渲染到组件中 ``` mutations: { changeLetter(state,letter){ state.letter = letter; } }, ``` ``` state: { letter:"" }, ``` **** **list.vue** 在页面中直接使用该参数 ``` <span class="btn">{{this.$store.state.letter}}</span> ``` 通过计算属性computed得到letter ``` computed: { letter() { return this.$store.state.letter; } }, ``` 使用侦听监听值的变化 ``` watch: { letter() { var element = this.$refs[this.letter][0]; this.scroll.scrollToElement(element); } } ```