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

Posted 2023-03-07

【中文标题】Vue 3 模式在重新打开时返回旧数据

【英文标题】：Vue 3 Modal Comes Back With Old Data When Reopen

【发布时间】：2021-01-18 20:29:43

【问题描述】：

我正在使用 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”路线时，App.vue中显示Show.vue。

当我点击“创建”按钮时，包含 CarModal.vue 和与创建汽车相关的所有功能的 Create.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)" 设置为相同文件上的容器，并在模式关闭时随机更改密钥。它也没有用。我不知道任何其他选项来重置表单。我希望有人能指出我在这里缺少的东西。顺便说一句，当我关闭模式时，我确定汽车对象会变为空。

【参考方案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 开发工具中检查）

关闭模式时，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 ) ...这将创建具有从state.defaults 复制的属性值的新对象（假设所有属性都是值类型，如字符串、数字等。即不通过引用传递）

【讨论】：

这是我犯的一个令人难以置信的菜鸟错误。是的，你是对的，你的建议解决了我的问题。非常感谢。