vuex 突变取代了整个状态

Question

我正在使用 Vuex，而且我对它还很陌生。我想将数据提交到存储并用有效负载的内容替换状态。

我的商店是使用模块构建的，有问题的模块是用户模块，

目前我正在做类似我的突变的事情，

setUser(state, payload) {
    state.user = {...payload.user}
}

这使得我的状态在运行提交后看起来像这样

user: {
   user: {
     nickname: 'Bob',
     host: true,
     emoji: 'Smile',
     passcode: 12345678,
     room_id: 123
   }
}

理想情况下，我不想在用户对象中包含用户对象，我要么希望用户的每个属性成为状态的一部分，例如，

state : {
    nickname: 'Bob',
    host: true,
    emoji: 'Smile',
    passcode: 12345678,
    room_id: 123
}

或者它可能看起来像这样，

state : {
    user: {
        nickname: 'Bob',
        host: true,
        emoji: 'Smile',
        passcode: 12345678,
        room_id: 123
    }
}

我不明白为什么我会得到state.user.user？

这是我所在州的用户模块，

export default {
state: {
    user: {}
},
mutations: {
    setUser(state, payload) {
        state.user = {...payload.user}
    }
},
actions: {

},
getters: {

}

};

我也尝试过上面的方法state:{}

Answer 1

这是因为您在下面的突变层中间接创建了另一个用户对象

   setUser(state, payload) {
        state.user = {...payload.user }
    }

在变异层中，状态已经代表了整个用户状态。所以这里可以直接赋值user对象。

   setUser(state, payload) {
        state = {...payload.user }
    }

通常状态对象需要初始化如下，

state : {
    nickname: '',
    host: false,
    emoji: '',
    passcode: null,
    room_id: null
}