Vue component Activation element-ui dialog cannot be turned off?

activate dialog in element-ui in rt,vue component, dialog cannot close

app.vue

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

component:

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

}

in store.js:

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

after activating the component, isDialogVisible maintains the state of true and cannot be closed by clicking on the page. Solve.

Element-ui vuex vue.js javascript

Jun.13,2022

is this the effect
https://jsfiddle.net/hs7x03zu/
can take a look at the definition of .sync modifier
ide/components-custom-events.html-sharpsync-%E4%BF%AE%E9%A5%B0%E7%AC%A6" rel= "nofollow noreferrer" > https://cn.vuejs

when you click on the page to close, it actually triggers the event update:visible , which assigns the new value to the bound variable, which is approximately equal to dialogVisible=false , and then your dialogVisible is placed in vuex, so change the way you write it.

//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" });
  }
}

Previous: How to become a senior php development engineer? Do you have any books to recommend?

Next: The problem of merging git branches to overwrite the code?