[TOC] ## 方法一 ### 1. 組件中定義事件將參數傳給vuex ~~~ <li @click="handleclick" v-for="(item,index) of cities" :key="index">{{index}}</li> <script> export default { name:"CityWord", props:['cities'], methods:{ handleclick(event){ //將參數傳遞給store.js中的actions:方法中 this.$store.dispatch("changeLetter",event.target.innerText) } } } </script> ~~~ ### 2. 在store.js中的actions:方法中接收 ~~~ //接收子組件傳遞的事件 將改變的值傳給mutations actions: { //函數名為傳遞過來的函數名 參數 ctx為上下文 letter為傳遞的值 changeLetter(ctx,letter){ // console.log(letter); // 通過commit傳遞給 mutations: ctx.commit("changeLetter",letter) } ~~~ ### 3. mutations:中接收 ~~~ mutations: { //函數名為傳遞過來的函數名 參數 代表state屬性 letter為state中的值 changeLetter(state,letter){ state.letter=letter } }, ~~~ ### 4. state中的數據 ~~~ //相當于data state: { letter:"" }, ~~~ ### 5. 再頁面或組件中使用state中的值 ~~~ <!-- 使用vuex中的數據 --> {{this.$store.state.letter}} ~~~ ### 6. 用接收到的值通過監聽和計算屬性實現相應功能 ~~~ <div class="area" v-for="(item,index) of cities" :key="item.id" :ref="index"> <p class="title">{{index}}</p> <div class="list-city" v-for="(city,inx) of item" :key="inx">{{city.name}}</div> </div> ~~~ ~~~ //通過計算屬性接收到子組件（word）傳遞給vuex然后傳過來的參數letter computed: { //通過定義參數的函數來獲取到參數 letter(){ return this.$store.state.letter } }, watch:{ //通過定義參數的監聽函數監聽參數的改變從而改變html中設置 :ref="index"屬性的值 //:ref="index"為頁面所跳轉的位置里面傳的參數為for循環的對象中的屬性名相當于數組中的下標因為循環的是個對象 letter(){ //console.log(1) console.log(this.$refs) //控制頁面跳轉到本頁面中的指定位置 const element = this.$refs[this.letter][0]; this.scroll.scrollToElement(element); } } ~~~ ## 方法二 ~~~ 基本同方法一： ①將步驟一種的 this.$store.dispatch 改為 this.$store.commit ②去掉步驟二 ~~~