时间戳

首页 > 解决方案 > VueX 替换状态中的数组数据

vue.js - VueX 替换状态中的数组数据

问题描述

我不知道如何解释这一点，所以让我们试一试。只知道我只是在学习 VueX 的潜力，所以请多多包涵。

我有一个名为的状态对象数组currentRoom，它一次只能保存一个对象。所以顾名思义，这意味着用户在房间内，然后他们改变房间，因此 currentRoom 应该将其数据更改为新房间。现在，它所做的一切都是为自己添加越来越大的对象。

为了实现我的目标，我需要改变什么？

export const actions = {
    [types.CURRENT_ROOM]({state, commit}, room) {
        commit(types.CURRENT_ROOM, {room});
    },
}

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

export const types = {
    CURRENT_ROOM: 'current_room'
}

我在我的 VUE 文件中使用的代码

this.$store.dispatch(RoomTypes.CURRENT_ROOM, room);

在我的脑海中，我觉得应该有类似 REPLACE 而不是 dispatch 的东西，或者我只是在想这个错误。所以教育和教育我哦，Stack Overflow 上的好人！

旁注：Vue 3 和 VueX 4

标签： vue.jsvuexvuejs3

解决方案

数组增长是因为您正在调用Array.prototype.push()，它将一个项目附加到数组中。假设一个单元素数组，您可以使用方括号替换数组元素，并0为数组索引：

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

但是，数组旨在保存多个值。如果您只有一个值，则不需要数组。

state.currentRoom应从 an 更改Array为 an Object：

// store.js
export const state = () => ({
    currentRoom: {} // or null
})

并且突变应该将新值分配给state.currentRoom：

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

推荐阅读