Close Vuetify dialog with Vuex

After hours of searching and trying to find the correct method my n00b brain exploded. I've tried so many things that I'm complete lost. Everything works like I want it to, can remove the customer I want, the front refreshes etc. Except the dialog.

Can you please explain how to close this dialog?

Here is my dialog.

<template>
  <div>
    <template>
      <tbody>
        <tr v-for="customer in AllCustomers" :key="customer.id" class="todo">
          <td>{{customer.ID}}</td>
          <td>{{ customer.name }}</td>
          <td>{{customer.telephone}}</td>
          <td>{{customer.email}}</td>
          <v-btn color="success" @click="showDeleteDialog(customer)">DELETE</v-btn>
        </tr>
      </tbody>
    </template>
    <v-dialog v-model="dialogDelete" persistent max-width="500px">
      <v-card>
        <v-card-title>Delete</v-card-title>
        <v-card-text>Weet je zeker dat je {{customerToDelete}} wenst te verwijderen?</v-card-text>
        <v-card-actions>
          <v-btn color="primary" text @click="close">Annuleer</v-btn>
          <v-btn color="primary" text @click="deleteCustomer(customer.ID)">Verwijderen</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>



<script>
import { mapGetters, mapActions, mapState } from "vuex";

export default {
  name: "AllCustomers",

  data() {
    return {
      customerToDelete: "",
      dialogDelete: false
    };
  },

  methods: {
    ...mapActions(["fetchAllCustomers", "deleteCustomer"]),

    async close() {
      this.dialogDelete = false;
    },

    async showDeleteDialog(customer) {
      this.customer = Object.assign({}, customer);
      this.customerToDelete = this.customer.name;
      this.dialogDelete = !this.dialogDelete;
      this.$store.commit("toggleDialog");
    }
  },

  computed: mapGetters(["AllCustomers"]),
  created() {
    this.fetchAllCustomers();
  },
  ...mapState(["dialogDelete"])
};
</script>

And here my module js.

import axios from 'axios';

const state = {
    customers: [],
    dialogDelete: false
};

const getters = {
    AllCustomers: state => state.customers
};

const actions = {
    async fetchAllCustomers({ commit }) {
        const response = await axios.get(
            'http://localhost:8888'
        );
        console.log(response.data.data);
        commit('setAllCustomers', response.data.data);
    },

    async deleteCustomer({ commit }, id) {
        await axios.delete(`http://localhost:8888/delete`, {
            data: {
                id: id
            }
        })
        console.log(id)
        commit('removeCustomer', id, this.dialogDelete = false);
    },

}

const mutations = {
    setAllCustomers: (state, customers) => (state.customers = customers),
    removeCustomer: (state, id) =>
        (state.customers = state.customers.filter(customer => customer.ID !== id)),
}

export default {
    state,
    getters,
    actions,
    mutations
};

You should use mapState to get your dialogDelete variable from store:

 // in your dialog
 import { mapState } from "vuex"

 computed: {
 ...mapState(["dialogDelete"])
 }

and you should change its state in mutations with a commit:

// in vuex store
const mutations = {
setAllCustomers: (state, customers) => (state.customers = customers),
removeCustomer: (state, id) =>
    (state.customers = state.customers.filter(customer => customer.ID !== 
id)),
toggleDialog: (state) => (state.dialogDelete = !state.dialogDelete)    
}

// in your dialog
this.$store.commit("toggleDialog")