3-1 使用事件向vuex传递数据

一、在路由中自定义事件

<router-link tag="li" to="/movie" @click.native="handleMovie" >
     <i class="iconfont icondianying1"></i>
     <p>电影</p>
</router-link>

Tips: router-link的事件@click.native

二、this.$store.dispatch向vuex派发一个事件

methods:{
  handleMovie(){
    this.$store.dispatch('changeTitle',"豆瓣电影")
  }
}

三、vuex中通过actions属性接收

Tips:actions中的事件的名称要和dispatch中一样

export default new Vuex.Store({
  state:{
    title:"首页"
  },
  actions:{
    //ctx表示上下文  title是组件通过事件传递过来的数据
    changeTitle(ctx,title){
      ctx.commit('changeTitle',title)
    }
  },
  mutations:{
    changeCity(state,title){
      //state表示state属性中的数据
      state.title = title
    }
  }
})