Vue3+VueX4环境下如何替换state中currentRoom数组数据而非追加？

问题根源 #

错误出在mutation的操作逻辑上，与dispatch调用方式无关：你当前用了数组的push()方法，作用是往原有数组末尾追加新元素，自然会导致数组元素越来越多。

两种修改方案 #

方案1：保留currentRoom为数组类型（仅修改mutation逻辑） #

直接将原有的push操作替换为数组整体赋值即可，每次切换房间都用仅包含新房间对象的数组覆盖原有数组，其他代码（action、组件调用逻辑）不需要做任何修改：

export const mutations = {
    [types.CURRENT_ROOM](state, {room}) {
        // 替换原有数组，始终只有一个元素
        state.currentRoom = [room]
    },
}

方案2：优化数据结构（更推荐） #

你的业务场景下currentRoom同一时间只会存在一个房间对象，用数组存储完全没有必要，可以直接将state中的currentRoom定义为对象类型，后续取值也不需要额外加[0]索引：

1. 先修改state中currentRoom的初始值定义：

// state定义处修改
state: {
    // 其他state项...
    currentRoom: null // 也可根据业务需要设置初始为空对象{}
}

2. 对应修改mutation逻辑：

export const mutations = {
    [types.CURRENT_ROOM](state, {room}) {
        state.currentRoom = room
    },
}

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