vuex 动态监听数据

需求：在子组件中监听父组件的动态数据变化

解决方案

//监听属性
  computed: {
    dialogState() {
    	// 数据变化能够实时监听
        console.log("监听属性",store.getters.dialogState);

      return store.getters.dialogState;
    }
  },
  //监控data中的数据变化
  watch: {
    dialogState(){
		// 方法体内第一次数据变化监听不到
	}
  },

详细描述：

父组件是一个弹出层，子组件又是动态组件，所以普通的父传子方案(v-bind，props)接收不到数据，那只好用vuex进行监听

• 父组件-DOM部分

<el-dialog class="childPage" title="" :visible.sync="dialogVisible" width="100%" height="100%">
  <component v-bind:is="dialogPage"></component>
</el-dialog>

• 父组件-动态设置数据

computed: {
	  dialogVisible: {
	    get() {
	      return store.getters.dialogState;
	    },
	    set(val) {
	      store.commit("dialogState", val)
	    }
	  }
  },

• 子组件监听父组件动态数据

//监听属性
  computed: {
    dialogState() {
    	// 数据变化能够实时监听
        console.log("监听属性",store.getters.dialogState);

      return store.getters.dialogState;
    }
  },
  //监控data中的数据变化
  watch: {
    dialogState(){
		// 方法体内第一次数据变化监听不到
	}
  },

• 现在没有搞懂为什么子组件监听的时候需要同时有computed、watch两个事件监听。 watch监听的时候第一次数据变化也拿不到？？？ 如果有知道的请不吝赐教

至于为什么要这样监听数据，主要是业务逻辑的关系：关于动态组件的一个小小的注意点：内存里的数据需要手动回收