合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
## 1.组件中定义事件 ~~~ <div class="button" @click="handleCityClick(item.name)" v-for="item of hotCities" :key="item.id">{{item.name}}</div> ~~~ ## 2. this.$store.dispatch向vuex触发一个事件 ~~~ methods:{ handleCityClick(city){ this.$store.dispatch('changeCity',city); } } ~~~ ## 3.在vuex中通过action属性接收 >Tip:actions中事件的名称要和dispatch中一样 ~~~ export default new Vuex.Store({ state: { city:'天门' }, actions: { // 接收组件通过事件传递过来的数据 changeCity(ctx,city){ ctx.commit('changeCity',city) } }, mutations: { changeCity(state,city){ //state表示state属性中的数据 state.city = city; } }, }) ~~~ ## 4.通过ctx.commit向vuex的mutations属性传递事件 ## 5.再通过state参数去改变值