vuex☞组件之间的监听

情景：

关闭弹窗后，父组件中输入框自动获取焦点。

eg

• 解决一：直接将el-dialog写在父组件中，就不存在父子关系，这样在关闭前，直接让输入框获取焦点。
• 缺点：代码清新度不高，不够模块化，假如存在多个dialog，所有代码扔一块，不方便管理维护。

优化方案：

• 解决二：将dialog抽取出来，作为单一的模块，掌管自己的逻辑。
• 缺点：假如涉及到比较多的数据交互，对于状态的管理会增加业务量。
• 优点：代码清晰度高，分模块管理。
  具体步骤：①使用vuex保存状态，在el-dialog before-close之前发送获取焦点指令
  ②在父组件中，监听这个状态值（状态值改变时候就执行获取焦点的方法）。关于如何获取焦点可以参考前面的文章elementUI el-input focus

貌似狠简单的样子，不就是vuex，操作状态的改变么？呵呵

代码片段

//子组件
<template>
  <el-dialog title="请录入唯一码" 
             ......
             :before-close="removeData"
             :lock-scroll="false"
  >
    ......
  </el-dialog>
</template>
   ......
   methods: {
      ...mapActions([
        'setInputFocus',
      ]),
     
      // dialog  关闭之前
      removeData() {
        this.setInputFocus(new Date())  //这个才是关键中的关键
      },
  }

//父组件中
 computed: {
      ...mapState([
        'inputSubFocus',
      ]),
    },
 watch: {
      'inputSubFocus': 'needFocus'
    },
methods:{
 needFocus() {
        this.$refs.xxx.$el.querySelector('input').focus();
      },
}

state
export default {
  inputSubFocus: '',
}
actions。。。略过