vue组件 激活 element-ui dialog 无法关闭?

Question

rt,vue 组件中激活 element-ui中的 dialog ,dialog 无法关闭

app.vue

    <el-dialog title="收货地址" :visible.sync="dialogVisible"></el-dialog>
    
    computed: {
    dialogVisible() {
      return this.$store.state.isDialogVisible;
    }
  }

组件中:

<el-button @click="showDialog()">登录</el-button>
methods: {
showDialog() {
  this.$store.commit({ type: "showDialog" });
}

}

store.js中:

    export default new Vuex.Store({
  state: {
    
    isDialogVisible: false
  },
  mutations: {
    showDialog(state) {
      state.isDialogVisible = true;
  }
  

激活组件以后,isDialogVisible一直保持 true 的状态, 无法通过点击页面来关闭.求解.

Answer 1

是不是这样的效果
https://jsfiddle.net/hs7x03zu/
可以看一下.sync修饰符的定义
https://cn.vuejs.org/v2/guide...

Answer 2

点击页面关闭的时候，其实触发了update:visible这个事件,作用是把新值赋值给绑定的变量，大概等于dialogVisible=false，然后你的dialogVisible是放在vuex里的，所以要改变一下写法。

//store.js

mutations: {
  hideDialog(state) {
    state.isDialogVisible = false;
}

//app.vue

dialogVisible: {
  get:function(){ 
    return this.$store.state.isDialogVisible; 
  },  
  set:function(val){
    this.$store.commit({ type: "hideDialog" });
  }
}