再去定义几个 getter，可以得到笔记的更新时间 .. 字数 .. 还有截取之后的内容 .. 打开 getters.js

更新时间的显示格式我们用了 moment.js .. 先给项目安装一下它 .. 回到命令行 .. 进入到项目所在的目录 .. 执行 npm install moment --save

截取内容我们之前用到了 lodash 里提供的一个小功能 .. 再安装一下 lodash .. npm install lodash --save

回到 getters.js .. 先在文件顶部 .. 导入 moment .. import moment from .. moment .. 然后导入 lodash .. import _ from lodash ..

这个 moment 我们还得配置一下，让它用中文语言 .. moment.locale('zh-CN')

getters

然后再去添加几个 getter .. export const updated .. 一个 state .. 这个方法可以返回另一个方法，这个返回的方法又可以接收一个参数，叫 entity ..

在这个方法里， return 的是用 moment 处理之后的笔记的更新时间 .. entity.meta.updated .. 用一下 fromNow()

用类似的方法再添加一个 getter .. 可以复制一份 ... 名字是 words .. 返回的是 entity.body.length .. 就是笔记 body 属性里的字符数量 ..

再复制一份 .. 这个 getter 叫 header ... 它返回的是 .. 用一下 lodash 里的 truncate .. 处理一下 entity 的 body ... length ，长度，设置成 30 ..

应用

打开应用的 Note 组件 .. 先导入一个帮手方法 .. mapGetters .. 它来自 vuex ..

然后在组件里面，添加一个 computed 属性 .. 里面 spread 一下 mapGetters .. 需要 updated，words ... 还有 header 这几个 getter ..

在组件的模板里再用一下这些 computed 属性 .. 这里绑定一个 words .. 把 entity 交给它 ..

header 元素里可以绑定输出一个 header，同样需要一个 entity 参数 ..

meta 里面是笔记的更新时间 .. 用一下 updated .. 再添加一个 entity 参数 ..

预览

现在，笔记项目的左边会显示一个更新的时间 ... 修改一下笔记内容 .. 这个更新时间会立即发生变化 .. 笔记的标题会自动截取笔记内容的一部分显示 ..

项目的下面还有个字数的统计 ...