vuex 突变设置状态

Question

我正在向一个 api 发出请求，它返回一个看起来像的响应，

{"quiz_history":{},"user":{"id":196,"nickname":"VuexTest3","login_code":"88988472","host":1,"room_id":46,"emoji":"/images/emojis/2.png","created_at":"2019-10-15 16:24:14","updated_at":"2019-10-15 16:24:14"},"quiz":[{"id":1,"date_playable":"2019-10-15 00:00:00","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","questions":[{"id":1,"quiz_id":1,"question":"Velit sed sint consequatur iusto.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":1,"answer":"aut","correct":0,"question_id":1,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":2,"answer":"modi","correct":0,"question_id":1,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":3,"answer":"sunt","correct":1,"question_id":1,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":4,"answer":"mollitia","correct":0,"question_id":1,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":2,"quiz_id":1,"question":"In praesentium laboriosam molestiae voluptatem natus.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":5,"answer":"similique","correct":0,"question_id":2,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":6,"answer":"possimus","correct":0,"question_id":2,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":7,"answer":"dolorem","correct":1,"question_id":2,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":8,"answer":"labore","correct":0,"question_id":2,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":3,"quiz_id":1,"question":"Aut totam quia praesentium qui.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":9,"answer":"non","correct":0,"question_id":3,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":10,"answer":"aperiam","correct":0,"question_id":3,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":11,"answer":"et","correct":1,"question_id":3,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":12,"answer":"nihil","correct":0,"question_id":3,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":4,"quiz_id":1,"question":"Expedita porro et fuga in. Et quae fugiat accusantium sed corrupti.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":13,"answer":"fuga","correct":0,"question_id":4,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":14,"answer":"provident","correct":0,"question_id":4,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":15,"answer":"et","correct":1,"question_id":4,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":16,"answer":"soluta","correct":0,"question_id":4,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":5,"quiz_id":1,"question":"Explicabo rerum cumque dolor eius corporis.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":17,"answer":"aut","correct":0,"question_id":5,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":18,"answer":"dolorum","correct":0,"question_id":5,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":19,"answer":"beatae","correct":1,"question_id":5,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":20,"answer":"laudantium","correct":0,"question_id":5,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":6,"quiz_id":1,"question":"Adipisci ducimus molestias in et.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":21,"answer":"voluptatem","correct":0,"question_id":6,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":22,"answer":"earum","correct":0,"question_id":6,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":23,"answer":"optio","correct":1,"question_id":6,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":24,"answer":"velit","correct":0,"question_id":6,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":7,"quiz_id":1,"question":"Aliquam atque et dolores quidem.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":25,"answer":"optio","correct":0,"question_id":7,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":26,"answer":"aut","correct":0,"question_id":7,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":27,"answer":"nostrum","correct":1,"question_id":7,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":28,"answer":"ad","correct":0,"question_id":7,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":8,"quiz_id":1,"question":"Eos asperiores deleniti tempore ducimus quo voluptate.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":29,"answer":"tenetur","correct":0,"question_id":8,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":30,"answer":"enim","correct":0,"question_id":8,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":31,"answer":"consectetur","correct":1,"question_id":8,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":32,"answer":"assumenda","correct":0,"question_id":8,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":9,"quiz_id":1,"question":"Et et ratione aliquam dignissimos.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":33,"answer":"et","correct":0,"question_id":9,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":34,"answer":"maxime","correct":0,"question_id":9,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":35,"answer":"sit","correct":1,"question_id":9,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":36,"answer":"optio","correct":0,"question_id":9,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":10,"quiz_id":1,"question":"Rerum amet dolores inventore nemo rem sapiente provident.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":37,"answer":"praesentium","correct":0,"question_id":10,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":38,"answer":"maiores","correct":0,"question_id":10,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":39,"answer":"dicta","correct":1,"question_id":10,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":40,"answer":"iste","correct":0,"question_id":10,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":11,"quiz_id":1,"question":"Et qui aut ullam molestiae esse iste quis.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":41,"answer":"et","correct":0,"question_id":11,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":42,"answer":"ut","correct":0,"question_id":11,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":43,"answer":"aut","correct":1,"question_id":11,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":44,"answer":"laudantium","correct":0,"question_id":11,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":12,"quiz_id":1,"question":"Non sunt repellendus et aut quae.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":45,"answer":"consequatur","correct":0,"question_id":12,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":46,"answer":"ea","correct":0,"question_id":12,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":47,"answer":"occaecati","correct":1,"question_id":12,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":48,"answer":"saepe","correct":0,"question_id":12,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":13,"quiz_id":1,"question":"Numquam inventore amet vel at officiis. Minima sed temporibus ut aut.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":49,"answer":"dolor","correct":0,"question_id":13,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":50,"answer":"reprehenderit","correct":0,"question_id":13,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":51,"answer":"sint","correct":1,"question_id":13,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":52,"answer":"officia","correct":0,"question_id":13,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":14,"quiz_id":1,"question":"Iure qui consequatur corrupti consectetur quia voluptatem beatae.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":53,"answer":"tempora","correct":0,"question_id":14,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":54,"answer":"doloribus","correct":0,"question_id":14,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":55,"answer":"quas","correct":1,"question_id":14,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":56,"answer":"voluptas","correct":0,"question_id":14,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]},{"id":15,"quiz_id":1,"question":"Quis earum quia eos iste necessitatibus dolore.","created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23","answers":[{"id":57,"answer":"et","correct":0,"question_id":15,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":58,"answer":"totam","correct":0,"question_id":15,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":59,"answer":"omnis","correct":1,"question_id":15,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"},{"id":60,"answer":"quam","correct":0,"question_id":15,"created_at":"2019-10-15 16:38:23","updated_at":"2019-10-15 16:38:23"}]}]}]}

我想设置我的状态以匹配响应，我正在这样做，

mutations: {
    setQuiz(state, payload) {
        state = {...payload.quiz};
    },
},

这是一个名为 quiz 的模块，所以我希望我能得到类似 state.quiz 的内容，其中包含服务器响应的任何内容。

然而，突变后state.quiz 只是空的。我不明白为什么。

Answer 1

根据您的回复，您得到的输出是

{...paylad.quiz}

输出

{
0: {id: 1, date_playable: "2019-10-15 00:00:00", created_at: "2019-10-15 16:38:23", updated_at: "2019-10-15 16:38:23", questions: Array(15)}
}

在这里，您正在以数组格式进行测验，当您在对象 ({}) 中传播运算符（...）时，它会尝试使用数组索引和值作为数组值来创建对象键

你可以这样做

mutations: {
    setQuiz(state, payload) {
        state.quiz = payload.quiz;
    },
},