Vuex获取后端数据后数组未正常更新问题求助

我已经被后端取数后在Vuex中保存和修改数组的问题困扰好几天了，试过各种同类问题的解决方案都无效。

相关代码 #

actions.js #

import http from "@/assets/api.js";
export default {
  async getDate(context, payload) {
    const response = await http
      .get(`/dates/limit/?first=${payload.first}&rows=${payload.rows}`, token)
      .catch((error) => {
        const nError = new Error(
          error.response.data.detail || "Error get date"
        );
        throw nError;
      });
    context.commit("GetDate", response.date);
  },
  async UpdateDate(context, payload) {
    const date = {
      name: payload.name,
    };
    const servers = context.getters.showDates
    const index = servers.findIndex((el) => el.id === payload.id)
    const response = await http
      .put(`/date/${payload.id}`, date)
      .catch((error) => {
        const nerror = new Error(error.response.data.detail || 'Fail to Update')
        throw nerror
      })
    context.commit('UpdateDate', response.data)
    return response.statusText
  },
}

getters.js & index.js #

// getters.js
export default{
  showDates(state){
      return state.dates
  },
}

// index.js
import mutations from './mutations.js'
import actions from './actions.js'
import getters from './getters.js'

export default{
    state(){
        return{
            dates:[],
        }
    },
    mutations,
    getters,
    actions
}

mutations.js #

export default {
  GetDate(state, payload) {
    state.dates= payload;
    //state.dates= [...payload];
  },
}

页面组件代码 #

<script setup>
import {computed} from "vue";
import { useStore } from "vuex";
const store = useStore();
const contextDate = computed(() => {
  try {
    return store.getters.showDates;
  } catch (e: any) {
    showToast(e, notification.error);
  }
});
</script>

尝试过的无效修改 #

我曾尝试修改mutation逻辑，但报错且数组更新异常：

// const TaskCopy = state.agents.map(function(element, index) {
//   console.log(element)
//   console.log(index)
//      if(index === payload.id){
//        element = payload
//      }
//     return TaskCopy;
//   });

核心问题 #

调用UpdateDate action后，store中的数组仅顶层字段（id、name、id_user、id_dates_r）更新，嵌套的user和dates_r字段未同步更新。组件中调用AddItem函数时，尝试用Object.assign修改computed返回的数组项，也未解决问题。

使用的依赖版本 #

"dependencies": {
    "@mdi/font": "6.2.95",
    "axios": "^1.7.2",
    "roboto-fontface": "*",
    "vue": "^3.4.21",
    "vue-router": "^4.3.2",
    "vuetify": "^3.5.8",
    "vuetify-sonner": "^0.3.19",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/types": "^7.24.0",
    "@types/node": "^20.11.25",
    "@vitejs/plugin-vue": "^5.0.4",
    "sass": "^1.71.1",
    "typescript": "^5.4.2",
    "unplugin-fonts": "^1.1.1",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.1.5",
    "vite-plugin-vuetify": "^2.0.3",
    "vue-tsc": "^2.0.6"
  }

后端返回响应示例 #

{
  "id": 1,
  "name": "test",
  "id_user": 1,
  "id_dates_r": 1,
  "user": {
    "id": 1,
    "name": "TestUser",
    "descr": "2",
     "created_at": "2024-06-30T17:59:49.669Z",
    "updated_at": "2024-06-30T17:59:49.669Z"
  },
  "dates_r": {
    "id": 1,
    "name": "TestDatesRecord",
    "url": "3",
    "created_at": "2024-06-30T18:00:06.540Z",
    "updated_at": "2024-06-30T18:00:06.540Z"
  }
}

Store中的数组示例 #

[
    {
        "id": 1,
        "name": "test",
        "id_user": 1,
        "id_dates_r": 2,
        "user": {
            "id": 2,
            "name": "User2",
            "descr": "1",
            "created_at": "2024-06-30T22:20:15.255Z",
            "updated_at": "2024-06-30T22:20:15.255Z"
        },
        "dates_r": {
            "id": 2,
            "name": "test2",
            "url": "2",
            "created_at": "2024-07-01T01:45:50.946Z",
            "updated_at": "2024-07-01T01:45:50.946Z"
        }
    },
    {
        "id": 2,
        "name": "test2",
        "id_user": 2,
        "id_dates_r": 1,
        "user": {
            "id": 2,
            "name": "User2",
            "descr": "1",
            "created_at": "2024-06-30T22:20:15.255Z",
            "updated_at": "2024-06-30T22:20:15.255Z"
        },
        "dates_r": {
            "id": 1,
            "name": "TestDatesRecord",
            "url": "3",
            "created_at": "2024-06-30T18:00:06.540Z",
            "updated_at": "2024-06-30T18:00:06.540Z"
        }
    }
]

组件中调用的AddItem函数 #

async function AddItem() {
  if (editedIndex.value > -1) {
    try {
      const message = await store.dispatch("UpdateDate", editedItem);
      Object.assign(contextDate.value[editedIndex.value], editedItem);
      showToast(NotificationTextDefault.fildUpdate, notification.success);
    } catch (e: any) {
      showToast(e, notification.error);
    }
  } else {
     try {
       await store.dispatch("AddDate", editedItem);
      showToast(NotificationTextDefault.fildCreate, notification.success);
     } catch (e: any) {
       showToast(e, notification.error);
     }
  }
  close();
}

内容的提问来源于stack exchange，提问作者Ivan