Vue 3 Modal 在重新打开时返回旧数据

Question

我正在使用 Vue 3 和 Vuex 4。当我打开模式时，主要对象（汽车）变得等于默认对象，并且这些默认值填充模式的表单。下面的代码是简化版。

Vuex 模块：

state: {
    car: {}
    defaults: {
        brand: "",
        color: "",
        value: ""
        ...
    }
},
actions: {
    fillTheCar(state, commit) {
        commit("SET_CAR", state.defaults)
    },
},
mutations: {
    SET_CAR(state, payload) {
        state.car = payload
    }
}
getters: {
    data(state) {
        return state.car    
    }
}

当我填写任何输入字段时，“汽车”对象会按预期更新。当我关闭模式时：

methods: {
    closeModal() {
        this.$store.commit("Cars/SET_CAR", {})
        // I have a different Vuex module to control all toggled items
        // such as sidebar, modals, header, etc.
        // I change modal visibility on there.
        this.$store.commit("Toggles/SET_VISIBILITY", {modal: false}
    }
}

我的文件结构是这样的：

App.vue 
/ Components
  / Modal.vue
  / Input.vue
  / ...
/ Pages
  / Cars
    / Show.vue
    / Edit.vue
    / Create.vue
    / Delete.vue
    / CarModal.vue

当我去“/cars”路线时，Show.vue显示在App.vue。

当我单击“创建”按钮时，Create.vue 会显示出来，其中包括 CarModal.vue 以及与创建汽车相关的所有功能。

CarModal.vue 具有 CRUD 操作所需的所有表单项，并将其自身注入 /components/Modal.vue

//components/Modal.vue
<template>
    <teleport to="body">
        <slot name="header"></slot>
        <slot name="content"></slot>
        <slot name="actions"></slot>
    </teleport>
</template>

我希望这些详细信息足以获得帮助。这是我的问题：

如果我填写一些输入并关闭模态，然后重新打开它，它会返回之前填充的输入中的数据，即使我在关闭模态时清空了汽车对象。我尝试使用 v-if 销毁 Modal、CarModal 和 Create 文件。它没有做任何改变。我尝试将 :key="Math.floor(Math.random() * 1000000)" 设置为同一文件上的容器，并在模式关闭时随机更改密钥。它也没有用。我不知道重置表单的任何其他选项。我希望有人能指出我在这里缺少的东西。顺便说一句，我确定当我关闭模态时汽车对象变空了。

Answer 1

我认为问题出在您的商店

actions: {
    fillTheCar(state, commit) {
        commit("SET_CAR", state.defaults)
    },
},
mutations: {
    SET_CAR(state, payload) {
        state.car = payload
    }
}

当我打开模式时，主要对象（汽车）变得等于默认对象，这些默认值填充模式的表单

因此，当您打开模式时，您正在调用 fillTheCar 操作，该操作将依次调用突变 - 结果是，state.car 指向与 state.defaults 相同的对象。因此，当您在模式中更改某些内容时，您实际上也在更改 state.defaults 的属性（应该很容易在 Vue Dev Tools 中检查）

关闭模态时，this.$store.commit("Cars/SET_CAR", {}) 只会将 state.car 设置为一个新对象，但当您再次打开它时，它将再次设置为 state.defaults（已从之前修改）

TLDR

这不是 Vue/Vuex 问题，而是 JavaScript 用法...

要将 state.car 设置为一些默认值，而不是 commit("SET_CAR", state.defaults) 执行 commit("SET_CAR", { ...state.defaults }) ...这将创建一个新对象，其中属性值是从 [=13= 复制的]（假设所有属性都是值类型，如字符串、数字等。即不通过引用传递）

Vue 3 Modal 在重新打开时返回旧数据

Vue 3 Modal Comes Back With Old Data When Reopen

vue.js

vuex

vuejs3