Laravel+Vue聊天应用Pinia数组元素被意外覆盖问题求助

问题背景 #

我用Laravel+Vue开发了带聊天功能的Web应用，借助Pinia存储会话数据。发送消息时使用unshift()方法将新消息添加到数组头部，实现类似Messenger的显示效果，但每次发送新消息时，数组中的最后一个元素都会被新消息覆盖。

Pinia存储文件（storeChats.js） #

import axios from "axios";
import { ref } from "vue";
import { defineStore } from "pinia"

export const useChatStore = defineStore('Chat', () => {
const conversation = ref(new Array())

return {conversation}
})

聊天组件代码 #

// 模板相关代码
// 导入相关代码

import { useChatStore } from '../../Store/storeChatNotif'

const storeChat = useChatStore();

const message = mess => {
if(mess == '' || !mess) ''
else
    if(mess.trim() != ''){
        
        axios.post('/chat/send', {
            user: storeChat.selectedUserChat.id,
            message: mess
        }).then(res => {
            let data = res.data
            
            if(storeChat.conversation.length == 0)
                storeChat.conversation.push(res.data)
            else{
                
                storeChat.conversation.unshift({...res.data})
            }
      
        }).catch(e => {
            // 错误处理代码
        })
    }
}

服务器返回的消息格式 #

{
    "avatar": null,
    "convoId": 53,
    "created_at": "2023-03-07T13:11:16.000000Z",
    "id": 3,
    "message": "hi",
    "name": "Anna Doe",
    "receiver": 3,
    "seen": null,
    "sender": 1,
    "updated_at": "2023-03-07T13:11:16.000000Z"
}

问题现象 #

• 发送第一条消息后，数组仅有一条对应消息
• 发送第二条消息后，数组头部新增新消息，但最后一条旧消息被替换为新消息内容
• 发送第三条消息后，数组头部新增新消息，最后一条消息再次被替换为最新消息内容

可能的原因分析 #

1. Store实例导入错误
   你的Pinia存储文件是storeChats.js，但组件中导入的却是storeChatNotif，这意味着你实际操作的是另一个Store实例。如果storeChatNotif中的conversation数组存在错误的更新逻辑（比如每次添加新消息时同时修改最后一个元素），就会导致该问题。请确认导入的Store路径和实例是否正确。

2. 对象引用重复
   虽然你使用{...res.data}解构创建新对象，但如果服务器端返回的res.data是被复用的对象引用（比如Laravel代码中错误地复用了同一个模型实例，修改属性后直接返回），会导致新添加的元素和旧元素指向同一个对象。当新消息的属性覆盖旧对象时，数组中所有指向该对象的元素内容都会同步变化。可以在unshift前打印res.data.id，确认每次返回的消息ID是否唯一递增。

3. 其他逻辑修改数组元素
   检查是否有其他代码（比如WebSocket实时消息监听、其他关联组件）修改了storeChat.conversation数组的最后一个元素。例如，如果接收服务器广播消息时，错误地将新消息赋值给数组的最后一项，就会覆盖旧内容。

4. 模板渲染的视觉误解
   如果模板中使用v-for渲染消息时，将数组索引index作为:key，Vue会复用DOM元素，导致视觉上看起来最后一条消息被更新，但实际数组数据是正确的。请将v-for的key绑定到消息的唯一标识（比如message.id）来验证。

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