使用 Vuex 关闭 Vuetify 对话框

Question

经过数小时的搜索并试图找到正确的方法，我的 n00b 大脑爆炸了。我已经尝试了很多东西，以至于我完全迷失了。一切都如我所愿，可以删除我想要的客户，前台刷新等等。除了对话框。

你能解释一下如何关闭这个对话框吗？

这是我的对话。

<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>

这是我的模块 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
};

Answer 1

您应该使用 mapState 从商店获取 dialogDelete 变量：

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

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

并且您应该通过提交更改其突变状态：

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

Answer 2

因为你没有在你的代码中包含 <script> 标签，我假设你试图通过来自 vue 组件的关闭事件直接切换 vuex 状态，这不会以这种方式工作。相反，您可能希望分派一个动作来提交一个切换 vuex 状态的突变。

但是，更好的办法是将对话框组件封装在一个单独的具有本地状态的 vue SFC（单文件组件）中isActive，您可以通过本地方法打开或关闭它this.isActive = false，一旦你导入了那个组件，你就给它一个 ref ref="deleteDialog"，然后你就可以像这样访问组件的内部方法：this.$refs.deleteDialog.close()

有关参考的更多信息，请参阅 docs。

编辑

例如：

DialogDelete.vue

<template>
    <v-dialog v-model="isActive" 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>
</template>

<script>
  export default {
    data() {
      return {
        isActive: false
      }
    },
    methods: {
      close() {
        this.isActive = false
      },
      open() {
        this.isActive = true
      }
    },
  }
</script>

Parent.vue

<template>
  <div>
    <v-btn @click="openDialog">Open Dialog</v-btn>
    <dialog-delete ref="deleteDialog" />
  </div>
</template>

<script>
  export default {
    components: {
      dialogDelete: () => import("./DialogDelete.vue"),
    },

    methods: {
      openDialog() {
        this.$refs.deleteDialog.open()
      }
    },
  }
</script>

我也很清楚你没有把 vuex 辅助方法（比如 mapGetters & mapState）放在它们应该在的地方，例如 mapState & mapGetters 应该在 computed:

内

computed: {
  ...mapGetters(["getterName"]),
  ...mapState(["stateName"])
}

查看 vuex docs。

使用 Vuex 关闭 Vuetify 对话框

Close Vuetify dialog with Vuex

vue.js

vuex

vuetify.js

vuex-modules