先去定义一个可以删除笔记的 Mutation ... 打开 mutations.js ... 添加一个新的修改 .. 名字可以是 destroyEntity .. 两个参数，state 还有 entity ..

这个删除方法在我们之前创建的 vue 项目里面可以找到 ... 就是 Notes 组件里的这个 destroy 方法 .. 复制一下这块代码 ..

粘贴到我们定义的 Mutation 里面 .. 再简单修改一下 .. 用一下 state 的 entities 的 filter，这个参数的名字可以改成 _entity .. return 的是 _entity.$loki .. 不等于 entity.$loki 的项目 ..

重新设置 state 的 entities ... 让它等于过滤出来的这个 _entities ..

下面这块会把要删除的笔记从数据库里也删除掉 ..

动作

然后打开 acrtions ，去定义一个动作 ... 名字是 destroy .. 第一个对象参数里有个 commit .. 第二个参数是 entity .. 方法里面，commit 一下 destroyEntity 这个 mutation ... 带着传递过来的这个 entity ..

应用

再打开 Note 组件 ... 先把 mapActions 从 vuex 里面提取出来 .. 在组件里再添加一个 methods 属性 ... 里面 spread 一下 mapActions .. 把 destroy 从 Action 里面拿出来给这个组件用一下 ..

然后找到模板里的这个垃圾筒小图标 .. 绑定一个 click 事件 ... 用 destroy 来处理 .. 再把 entity 作为它的参数 ...

预览

再去预览一下 ...

新建一个笔记 ... 再点一下它的垃圾筒小图标，这样会把这条笔记删除掉 ..

修改

有几个地方我们需要再修改一下 ... 在 Note 组件里面，添加一个 data 方法 ... return 一个 open 数据 .. 对应的值先设置成 false ..

在标题元素上，绑定一个点击事件 .. 点击以后，让 open 等于跟它当前相反的值 ..

在 editor 上用一下 v-if open .. 然后在这个垃圾筒小图标上，也用一个 v-if open ...

现在笔记默认会是关闭状态 .. 点一下标题，可以打开笔记 ...

再打开控制台 .. 这里会出现一些警告 ... 提示我们要为每个组件分配一个不同的 key 的值

打开 Notes 组件 .. 在 note 组件这里，再给它绑定一个 key .. 对应的值可以是 entity 下面的 $loki ，这个属性就是数据库里的文档的 id 号

现在我们就完成了项目的改造，这个项目会使用 vuex 来管理应用里的数据 .. 最后我们再预览一下 ...