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组件的close事件直接切换vuex状态，这将无法正常工作道路。取而代之的是，您将希望调度一个动作，该动作将提交一个突变来切换vuex状态。

但是，更好的主意是将对话框组件封装在具有本地状态isActive的单独的Vue SFC（单个文件组件）中，您可以通过本地方法{{1}来打开或关闭该状态。 }，然后导入该组件，然后给它一个引用this.isActive = false，然后您就可以访问该组件的内部方法，例如：ref="deleteDialog"

有关裁判的更多信息，请参见docs。

编辑

例如：

this.$refs.deleteDialog.close()

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

我也很清楚，您没有将vuex帮助器方法（如<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>和mapGetters放在应放置的位置，例如mapState和{{1 }}应该在mapState内：

mapGetters

签出vuex docs。

使用Vuex关闭Vuetify对话框

2 个答案: