如何在Vuex中实现状态规范化？

我也在开发使用Vuex的应用程序，并且遇到了处理嵌套对象会很痛苦的情况，因此我试图尽可能地规范化（扁平化）状态，如下例所示：

users: {
    1234: { ... },
    46473: { name: 'Tom', topics: [345, 3456] }
},
userList: [46473, 1234]

我的问题是：当您的API响应如下所示时，实现上述目标的“最佳”方法是什么：

data: [
    {id: 'u_0001', name: 'John', coments: [{id: 'c_001', body: 'Lorem Ipsum'}, {...}],
    {id: 'u_0002', name: 'Jane', coments: [{id: 'c_002', body: 'Lorem Ipsum'}, {...}],
    {...}
] 

为了示例的缘故，假设它comments是的子模块users：

选项1：

// action on the user module
export const users = ({ commit, state }, users) => {
    commit(SET_USERS, users)
    commit('comments/SET_COMMENTS', users)
}


// mutation on the user module
[types.SET_USERS] (state, users) {
     state.users = users.reduce((obj, user) => {
         obj[user.id] = {
             id: user.id, 
             name: user.name,
             comments: user.comments.map(comment => comment.id)
         } 
         return obj
     }, {})
    state.userIds = users.map(user => user.id)
},


// mutation on the comments module
[types.SET_COMMENTS] (state, users) {
    let allComments = []
    users.forEach(user =>  {
        let comments = user.comments.reduce((obj, comment) => {
            obj[comment.id] = comment
            return obj
        }, {})
        allComments.push(comments)
    })

   state.comments = ...allComments
},

IMO这个选项很好，因为您不必担心每次更改页面（SPA / Vue-Router）时都要重置状态，避免了由于某种原因id: u_001而不再存在的情况，因为每次更改突变时都会覆盖该状态，但是users array将都传递给这两个突变体感觉很奇怪。

选项2：

// action on the user module
export const users = ({ commit, state }, users) => {
    // Here you would have to reset the state first (I think)
    // commit(RESET)

    users.forEach(user => {
        commit(SET_USER, user)
        commit('comments/SET_COMMENTS', user.comments)
    })
}


// mutation on the user module
[types.SET_USER] (state, user) {
    state.users[user.id] = {
        id: user.id, 
        name: user.name,
        comments: user.comments.map(comment => comment.id)
    }  
    state.userIds.push(user.id)
},


// mutation on the comments module
[types.SET_COMMENTS] (state, comments) {
    comments.forEach(comment => {
        Vue.set(state.comments, comment.id, comment)
    })
    state.commentsIds.push(...comments.map(comment => comment.id)
},

在这种情况下，需要重置状态，否则每次离开并重新租用该页面时，您都会得到重复/旧的值。Wich有点烦人，并且更倾向于错误或行为不一致。

结论你们如何应对这种情况和建议/最佳实践？因为我坚持这些事情，所以答案非常感谢。

另外，由于需求并不那么复杂，因此我尝试避免使用3r方库，例如Vue ORM，normalizr等。

谢谢，

PS：由于我只是在未经测试的情况下编写代码，所以代码可能会出现错误，请着眼大图。