选中笔记可以编辑里面的内容，输入的内容可以实时地保存到应用的数据库 .. 先打开 mutations.js 添加一个新的修改 .. 名字可以是 updateEntity .. 这个修改有两个参数，state，再给它一个 entity，这个 entity 在用这个修改的时候可以传递过来 .. entity 就是要更新保存的内容 ..

在之前做过的 vue 项目的 app.js 里面 .. 这里的 Note 组件的 save 这个方法，就是我们定义的这个修改要做的事 .. 复制一下 .. 粘贴到这个 mutation 里面 ..

修改一下 .. 这里 update 的是 entity .. 去掉前面的 this ..

动作

然后去定义一个动作 .. 打开 actions.js .. 添加一个动作 .. 名字是 update .. 第一个参数是个对象 .. 里面有个 commit .. 第二个参数是 entity .. 表示的就是要更新保存的内容 ..

在方法里面 .. commit 一下 updateEntity 这个修改 .. 把 entity 再交给这个修改 ...

组件

然后打开 Note 组件 .. 在 editor 这里，可以给它绑定一个 entity .. 对应的值就是 entity ..

再打开 Editor 组件 .. 先在组件里面导入一个帮手方法 .. 就是这个 mapActions .. 来自 vuex ..

组件里添加一个 props ，声明一下要使用的属性 .. 添加一个 entity .. 它就是从 Note 组件传递过来的 ..

上面再添加一个 methods 属性 .. 里面 spread 一下 mapActions .. 把 update 从动作里拿出来，放在这个 methods 里面用一下 ..

找到组件的模板 .. 在这个 textarea 里面可以修改一下 .. 先把 rows .. 设置成 5 .. placeholder 添加个点位符文字 .. 写点东西...

然后用一下 v-model .. 绑定的是 entity 的 body ..

下面再监听一下 input 事件 .. 使用 update 来处理 .. 把 entity 再交给这个方法 ..

预览

再去试一下 ..

这里报了几个错误 ... 第一个错误是因为 .. 这个 props 后面多了一个逗号 .. 因为这个属性现在是对象里的最后一个属性，所以后面不能加逗号 ..

还有个错误出在了 actions 里面 ... 这里定义动作的时候，少了一个剪头符号 ...

再去编辑一个笔记内容 ... 会把修改实时地保存在数据库里 ... 可以刷新一下页面 ... 刚才对这个笔记做的修改仍然会在 .. 因为已经保存到数据库里了 ..