我在第一次进入页面时city页面的点击地区改变$store中的state事件就可以正常执行，但再次刷新就无法运行

问题：我在第一次进入页面时city页面的点击地区改变$store中的state事件就可以正常执行，但再次刷新就无法运行。我尝试使用console.log来判断citySearch.vue和cityList.vue中的点击事件是否可以正常执行,发现首次进入网站后再次刷新网页除了cityList.vue中热门地区的点击事件可以使用，citySearch.vue中ul区块和cityList.vue中A，B，C等区块的点击事件均不可以使用

city.vue

<template>
<div>
<city-header></city-header>
<city-search :cities="cities"></city-search>
<city-list :hotCities="hotCities" :cities="cities" :changeALph="changeALph"></city-list>
<city-alph :cities="cities" @change="handleAlph"></city-alph>
</div>
</template>

<script>
import CityHeader from './component/CityHeader.vue'
import CitySearch from './component/CitySearch.vue'
import CityList from './component/CityList.vue'
import CityAlph from './component/CityAlph.vue'
import axios from 'axios'
export default {
name: 'City',
components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlph
  },
data () {
return {
city: '',
hotCities: [],
cities: {},
changeALph: ''
    }
  },
methods: {
getAxios () {
axios.get('/api/city.json')
        .then(this.successInfo)
    },
successInfo (res) {
if (res.data.ret && res.data.data) {
this.city = res.data.data.city
        this.hotCities = res.data.data.hotCities
        this.cities = res.data.data.cities
        console.log(res)
      }
    },
handleAlph (letter) {
this.changeALph = letter
    }
  },
mounted () {
this.getAxios()
  }
}
</script>

<style scoped>

</style>

cityHeader.vue

<template>
<div class="cityHeader">城市选择
    <router-link to="/">
<div class="cityHeader-left">
<div class="iconfont backIcon">&#xe685;</div>
</div>
</router-link>
</div>
</template>

<script>
export default {
name: 'CityHeader'
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
  .cityHeader
    position:relative
    height:.86rem
    background:$bgColor
    overflow:hidden
    text-align:center
    line-height:.86rem
    color:white
    font-size:.32rem
    .cityHeader-left
      position:absolute
      top:0
      left:0
      padding-left:.1rem
      color:white
      .backIcon
       font-size:.4rem
</style>

citylist.vue

<template>
<div class="cityList" ref="wrapper">
<div>
<div class="area">
<div class="areaTitle border-topbottom">当前位置</div>
<div class="btnList">
<div class="btnWrapper">
<button class="areaBtn">{{this.currentCity}}</button>
</div>
</div>
</div>
<div class="area">
<div class="areaTitle border-topbottom">热门地区</div>
<div class="btnList">
<div class="btnWrapper" v-for="item of hotCities" :key="item.id" @click="changeAreaBtn(item.name)">
<button class="areaBtn">{{item.name}}</button>
</div>
</div>
</div>
<div class="area" v-for="(item,key) of cities" :key="key" :ref="key">
<div class="areaTitle border-topbottom">{{key}}</div>
<div class="areaItems" v-for="singleItem of item" :key="singleItem.id" @click="changeAreaBtn(singleItem.name)">
<div class="areaItem border-bottom">{{singleItem.name}}</div>
</div>
</div>
</div>
</div>
</template>

<script>
import BScroll from '@better-scroll/core'
import {mapState, mapMutations} from 'vuex'
export default {
name: 'CityList',
computed: {
    ...mapState({
currentCity: 'city'
    })
  },
mounted () {
this.scroll = new BScroll(this.$refs.wrapper)
  },
updated () {
this.scroll.refresh()
  },
props: {
hotCities: Array,
cities: Object,
changeALph: String
  },
watch: {
changeALph () {
if (this.changeALph) {
const ele = this.$refs[this.changeALph][0]
this.scroll.scrollToElement(ele)
      }
    }
  },
methods: {
changeAreaBtn (city) {
// this.$store.dispatch('changeArea', city)
      // this.$store.commit('changeRegion',city)
      this.changeRegion(city)
this.$router.push('/')
    },
    ...mapMutations(['changeRegion'])
  }
}
</script>

<style lang="stylus" scoped>
  .border-topbottom
    &:before
      border-color:#ccc
    &:after
      border-color:#ccc
  .border-bottom
    &:before
      border-color:#ccc
  .cityList
    position:absolute
    left:0
    top:1.58rem
    bottom:0
    right:0
    overflow:hidden
    .area
      .areaTitle
        background:#eee
        padding:.1rem .1rem
      .btnList
        padding:.1rem .6rem 0rem .1rem
        overflow:hidden
        .btnWrapper
          float:left
          .areaBtn
            background:#fff
            border:.02rem solid #ccc
            padding:0rem .75rem
            border-radius:.1rem
            margin-bottom:.1rem
            margin-right:.04rem
      .areaItems
        padding:.1rem
        .areaItem
          height:.42rem
          line-height:.42rem
          padding:.1rem 0rem
</style>

citysearch.vue

<template>
<div>
<div class="searchBg">
<input type="text" placeholder="输入城市名或拼音" class="searchInput" v-model="keyword"/>
</div>
<div class="searchContent" ref="itemWrapper" v-show="keyword">
<ul>
<li class="contentItem border-bottom" v-for="item of list" :key="item.id" @click="changeAreaBtn(item.name)">{{item.name}}</li>
<li class="contentItem border-bottom" v-show="hasNoData">没有找到匹配数据</li>
</ul>
</div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
import {mapMutations} from 'vuex'
export default {
name: 'CitySearch',
props: {
cities: Object
  },
data () {
return {
keyword: '',
timer: null,
list: []
    }
  },
computed: {
hasNoData: function () {
return !this.list.length
    }
  },
watch: {
keyword: function () {
if (this.timer) {
clearTimeout()
      }
if (!this.keyword) {
this.list = []
return
      }
this.timer = setTimeout(() => {
const result = []
for (let i in this.cities) {
this.cities[i].forEach((value) => {
if (value.name.indexOf(this.keyword) > -1 || value.spell.indexOf(this.keyword) > -1) {
result.push(value)
            }
          })
        }
this.list = result
      }, 100)
    }
  },
mounted () {
this.scroll = new BScroll(this.$refs.itemWrapper)
  },
methods: {
changeAreaBtn (city) {
// this.$store.dispatch('changeArea', city)
      // this.$store.commit('changeRegion',city)
      this.changeRegion(city)
this.$router.push('/')
    },
    ...mapMutations(['changeRegion'])
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
.border-bottom
  &:before
    border-color:#ccc
.searchBg
  background:$bgColor
  height:.72rem
  padding:0 .1rem
  .searchInput
    width:100%
line-height:.62rem
    height:.62rem
    border-radius:.06rem
    text-align:center
    padding:0 .1rem
    box-sizing:border-box
.searchContent
  position:absolute
  z-index:1
  left:0
  right:0
  top:1.58rem
  bottom:0
  overflow:hidden
  background:#eee
  .contentItem
      padding:.17rem
      background:#fff
</style>

cityAlph.vue

<template>
<ul class="cityAlph">
<li class="alphItem" v-for="item of letters" :key="item" :ref="item" @click="clickAlph" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">{{item}}</li>
</ul>
</template>

<script>
export default {
name: 'CityAlph',
props: {
cities: Object
  },
data () {
return {
touchState: false,
startY: 0,
timer: null
    }
  },
computed: {
letters () {
const letters = []
for (let i in this.cities) {
letters.push(i)
      }
return letters
    }
  },
updated () {
this.startY = this.$refs['A'][0].offsetTop
  },
methods: {
clickAlph (e) {
this.$emit('change', e.target.innerText)
    },
touchStart () {
this.touchState = true
    },
touchMove (e) {
if (this.timer) {
clearTimeout()
      }
this.timer = setTimeout(() => {
if (this.touchState) {
const touchY = e.touches[0].clientY - 79
          const index = Math.floor((touchY - this.startY) / 16)
console.log(index)
if (index >= 0 && index < this.letters.length) { this.$emit('change', this.letters[index]) }
        }
      }, 16)
    },
touchEnd () {
this.touchState = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/mixFunction.styl"
@import "~styles/varibles.styl"
.cityAlph
  position:absolute
  top:1.58rem
  right:0
  bottom:0
  font-size:.28rem
  width:.4rem
  vertical()
  .alphItem
    text-align:center
    padding:.02rem 0
    color:$bgColor
</style>

mixfunction.styl

ellipsis()
overflow:hidden
  white-space:nowrap
  text-overflow:ellipsis
vertical()
display:flex
  flex-direction:column
  justify-content:center

varibles.styl

$bgColor=#00bcd4
$blackText=#333

store-index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutation'

Vue.use(Vuex)

export default new Vuex.Store({
state: state,
actions: {
changeArea (ctx, city) {
      ctx.commit('changeRegion', city)
    }
  },
mutations: mutations
})

state.js

let defaultLocal = '上海'
try {
if (localStorage.city) {
defaultLocal = localStorage.city
  }
} catch (e) {}

export default {
city: defaultLocal
}

mutation.js

export default {
changeRegion (state, city) {
    state.city = city
try {
localStorage.city = city
    } catch (e) {}
  }
}

​