传递事件通信提交状态

问题描述: 二级页面上点击按钮弹出dialog, dialog输入框进行模糊查询, 模糊查询的值保存进VueX. 但关闭dialog时没有comit一个空对象进去, 回到一级页面时页面自动从VueX取值请求获得数据. 由于VueX值仍是模糊查询存的值, 获取到的数据是模糊查询的, 同时一级页面的输入框上没有值.

排除思路: 页面空白,点开控制台没有报错, 排除事件错误. 点开网络请求, 请求正常执行,也没有发现错误,最后发现一级页面的分页器只有一页, 请求到的数据可能不对, 再点开请求发现携带的参数包含一个fuzzyQuery对象, 真相终于大白, 剩下的问题就是回到一级页面时保证VueX内的值为空即可.

解决过程: 必须在回到一级页面前清除VueX的值,在二级页面中暴露出两个方法,但是如果关闭dialog后直接返回一级页面,那么一级页面还是会进行模糊查询,所以最好在关闭dialog时就清除Vuex的值

//dialog封装在公共组件的ManageSelect组件里,关闭和打开的visible事件由一个Drawer布尔值控制,用watch全局监听Drawer,当Drawer发生改变时,将visible事件$emit出去,在使用到dialog的组件中用一个事件接收,在接收事件里清除Vuex即可

<manage-select :visible.sync="Drawer"/>
    export default {
           name:'selectPros',
           data(){
             return {Drawer:false}
           },
           watch:{
             Drawer(visible){
                 this.$emit('visible',visible)
           }

<dep-use>
  <select-pros @visible="clearItems"><select-pros/>
<dep-use/>
    export default {
           name:'depUse',
           data(){return {}},
           Methods:{
             clearItems(){
                 this.$store.commit('filterItem/RESET');
           }