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 }
    }

在变异层中，状态已经代表了整个用户状态。因此，您可以在此处直接分配用户对象。

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

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

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

Answer 2

我同意@isebarn，如果您提供有效载荷随附的内容，则应该很容易解决。

{“ quiz_history”：[]，“ user”：{“ id”：1，“昵称”：“ Bob”，“ login_code”：“ 76752576”，“ host”：1，1，“ room_id”：1， “ emoji”：“笑脸”，“ created_at”：“ 2019-10-11 11:09:12”，“ updated_at”：“ 2019-10-11 11:09:12”}}

如果这就是您要传入并传递给方法的内容，则它应该起作用。但是我想您可能会传递其他内容，并且三点扩展语法会出错。

vuex突变取代了整个状态

2 个答案: