0

add.vue

<template>
    <div @click="add()">添加</div>
<template>
<script>
export fault{
    methods:{
        add(){
            this.$store.commit('point', event.target)
        }
    }
}
</script>

goods.vue

<template>

</template>
<script>
export falut{
    method:{
        play(el){
            for(let i=0;i<this.balls.length;i++){
                let ball =this.balls[i];
                if(!ball.show){
                   ball.show=true;
                   ball.el=el;
                   this.dropBalls.push(ball);
                   return;
                }
            }
        }
    }
}
</script>

goods.vue和add.vue是非父子隔层组件,之前用的全局变量监听事件做的,请问如何使用vuex实现 add组件传出参数,goods组件接收传入play方法并触发play方法执行?大神求解呀-_-|

2个回答

1

goods.vue

export default {
  computed: {
    pointData() {
      return this.$store.state.pointData;
    }
  },
  watch: {
    pointData(newVal) {
      this.play(newVal);
    }
  }
}
0

vuex的设计思想是发布/订阅模式。理解这个才是关键,不要想着怎么传入呀,接收呀....

重点理解store,dispatch,subscribe,action,mutation,state,getter这几个概念还有几个辅助map函数。

vuex文档

最后回答你的问题:
state 交给 vuex 管理。
add组件 dispatch action --> action 执行 --> commit event --> mutation 更改state。
goods组件 获取state中的状态,当state状态变更时,会触发重新渲染。

撰写答案