vue.js - Vuejs 不会在 Vuex 突变时更新 DOM

Question

我将 Vue3 与 Quasar2 一起使用，但在突变期间遇到问题：DOM 未更新。

1. 该代码由一个父组件、一个子组件列表（由 v-for 渲染）组成。数据通过计算属性来自 Vuex 存储。
2. 子组件仅表示数据，并使用所表示数据的 id 发出一个“编辑”事件。
3. 在“编辑”事件上，父组件用实际数据填充属性，并显示一个对话框。
4. 当对话框关闭时，父级调用一个动作来存储数据。
5. 动作（和以下突变）正常执行。Vuex 存储包含正确的数据。
6. 但是列表没有更新:(
7. 如果我向数据列表添加一个新元素（通过推送），那么列表将被更新。

清除的来源如下：

父.vue：

<template>
  <q-page class="flex flex-center" :key="mykey">
    <q-list padding>
      <child-component
        v-for="d in data"
        v-bind:key="d.id"
        v-bind:data="data"
        v-on:edit-time="onEdit"
      >
      </program>
    </q-list>

    <!-- EDITOR DIALOG -->
    <q-dialog v-model="editing" @hide="onEditDone">
 ....
    </q-dialog>
<script>
....
export default defineComponent({
  name: "PageIndex",
  created: function () {
    this.loadData();
  },
  data: function () {
    return {
      editing: false,
      ....
      },
    };
  },
  components: { Child },
  methods: {
    ...mapActions(["loadData", "updateData"]),
    onEdit(id) {
      ...
      this.editing = true; // <= show dialog
    },
    onEditDone() {
      try {
        ...
        this.updateData(data); // <== Vuex Action which updates an elem of the data list
      } catch (e) {
       ...
      }
    },
  },
  computed: {
    ...mapState({
      data: state => state.data
    }),
  }
});
</script>

state.js：

export default {
  data: [],
}

getters.js：

const getters = {
  data: (state) => {
    return state.data;
  },
};

export default getters;

突变.js：

updateData: (state, data) => {
  var idx = state.data.findIndex((element) => element.id == data.id);
  state.data.splice(idx, 1, data);
},

动作.js：

  async updateData(context, data) {
    try {
      await axios.post(`api/data?id=${data.id}`, data, {
        headers: {
          "Content-Type": "application/json",
        },
      });
      context.commit("updateData", data)
    } catch (err) {
      console.log(err);
    }
  },

标签： vue.jsquasar-framework