新增的文章会放在最下面（即新增的属性，放在对象的最后一位）

来源：11-6 缓存优化第二部分

风少_

2021-06-26

图片描述

createPost(state, newPost) {
  // 下面一行代码有bug：新增的文章会放在最下面（即新增的属性，放在对象的最后一位）
  // state.posts.data[newPost.data._id] = newPost.data

  // 解决方法1：将对象的最后一个属性，放在第一个位置
  const obj: { [key: string]: PostProps } = {}
  obj[newPost.data._id] = newPost.data
  state.posts.data = { ...obj, ...state.posts.data }

  // 解决方法2：先将对象转换为数组，再放进新增的元素，最后再转换为数组
  const arr: PostProps[] = objToArr(state.posts.data)
  arr.unshift(newPost.data)
  state.posts.data = arrToObj(arr) // 配合 helper.ts 文件的 arrToObj 函数的参数类型修改
},

老师你好。我感觉方法1比方法2好，老师有什么见解吗？
还有没有其它好的方法呢？

写回答

2回答

张轩

2021-06-27

已采纳

同学你好非常好的思考这两种方法都可以我觉得第一种方法更好一些，这个问题可以引申出另外一个知识点，就是假如你有排序需求的话（列表的排序），在这里我们可以引入另外一个辅助的数据结构，用来保存顺序，只保存 ID 即可，比如 ColumnsID: string[],里面存放的就是 Columns 的 id， ['1','2','3'] ，假如有排序，调换这个数组里面的顺序即可，这是flatten array 排序实现的一种常规做法。

风少_

张轩

1、之前讲到是将数组转换成带键值对的对象，但是对象存放的元素是无序的，那像这里如果考虑排序的话，是不是不应该转换成对象，用原来的数组就好了。 2、听了优化这几节课，感觉好像都应该把数组转换成带键值对的对象，那哪些情况是要考虑转换，哪些情况又是不应该转换的这两个问题，我是想抛开这节课，以后在工作中，什么时候能用上

2021-06-28

共4条回复

张轩

2021-06-29

同学你好我再回复一下看你的回复好像没有理解我的意思。

假如再我们优化后的数据结构想添加排序功能的话，只需要多添加一个数组，它来处理排序的问题，比如

columns: { data: {}, currentPage: 0, sorts: ['id1', 'id2', 'id3'] },

原来的逻辑是不变的。

所以对于你最后的疑问：工作上，什么时候能用，答案是：即使是有顺序需求的场景，也没问题，都可以用。

这样就比较完美，又可以享受优化后的数据结构，又可以解决对象顺序的问题。可以参考 redux 中的一个文档来帮你理解：

https://redux.js.org/usage/structuring-reducers/normalizing-state-shape 看了它的例子你应该就明白啦。

风少_

焕然大悟，非常感激老师

2021-06-30

共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

vuex哪些数据最好放到全局数据里？

回答 1

state为什么放在计算属性中？

回答 2

发表文章出现了两篇一样的新文章

回答 2

更新文章 code 422

回答 1

老师，我在最后npm run build的时候遇到几个ts错误不知道怎么改

回答 2

打开慕课网App查看更多内容