[TOC] ## 1.組件派發一個事件給vuex的actions ~~~ <ul class="nav"> ? ? ? ? ? <li ? ? ? ? ? @click="handleClick" ? ? ? ? ? v-for="(item,index) of cities" :key="index" >{{index}}</li> </ul> ~~~ ~~~ 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傳遞過來的參數 ? ? console.log(letter) ? } } }) ? ~~~ ## 3.將actions中傳遞過來的數據,commit給mutaitons ~~~ export default new Vuex.Store({ state: { ? ? letter:"" }, mutations: { changeLetter(state,letter){ ? ? ? //state表示vuex的state,letter是actions傳遞過來的參數 ? ? ? state=letter } }, actions: { //在這里接收 ? changeLetter(ctx,letter){ ? ? //ctx表示上個文,letter傳遞過來的參數 ? ? ctx.commit("changeLetter",letter) ? } } }) ~~~ ## 4.在頁面中直接使用 ~~~ this.$store.state.word ~~~ ## 5.通過計算屬性得到letter ~~~ computed: { ? letter() { ? ? return this.$store.state.letter; ? } }, ~~~ ## 6.通過watch屬性監聽letter的變化 ~~~ watch: { ? letter() { ? ? var elment = this.$refs[this.letter][0]; ? ? this.scroll.scrollToElement(elment); } } ~~~