用户登录

在 posts 这个 store 里面,再添加一个删除内容项目的动作 .. 导出一个 actions .. 它是一个对象 .. 里面添加一个动作 .. 名字是 destroyAction ,方法接收一个 context 参数 .. 还有一个 id 参数 .. id 的值就是要删除的内容项目的 id 号 ..

把这个方法标记成一个 async 方法 .. 因为方法里面有一些异步的动作 .. await ,执行的是 this.$axios.delete ,发出一个 delete 类型的 Http 请求,请求的接口地址是 http://localhost:3333/posts .. 后面加上内容的 id 号 .. 用 delete 类型的 http 请求,请求这种地址会删除掉指定的内容项目 ..

打开内容列表页面 .. 在组件里面添加一个 methods .. 里面添加一个方法,名字可以跟动作的名字一样 .. 比如 destroyAction .. 接收一个 id 参数 .. 方法里面用一下 this.$store.dispatch ,指派一个动作,动作是 posts/destroyAction .. 带着一个 id payload ..

在视图里面可以用一下这个方法 .. 先修改一下 nuxt-link 包装的东西 .. 把它放在 card 里面 .. 用它包装一下卡片里的 img 还有 card-body ..

然后在添加一个 div ,加上 card-footer .. 卡片的页脚 ... 里面放一个按钮 .. 按钮上面加上 btn.btn-link .. 按钮上面的文字是 Delete .. 点击这个按钮执行一下组件里的 destroyAction .. 所以可以给它绑定一个 click 事件 .. 执行的是 destroyAction .. id 参数的值是 post.id ...

在应用里我们创建的后端服务其实是一个演示用的 RESTful 接口 .. 用的是 json-server 创建的 .. assets 下面的 db.json ,这个文件就相当于是后端服务接口的数据库 .. 内容列表页面上显示的东西都在这个文件里面 .. 先复制一下这个文件里面的内容 .. 因为一会儿在前台执行删除动作的时候会从这个文件里面把内容删除掉 ..

回到内容列表页面 .. 按一下内容项目下面的这个 Delete 按钮 .. 执行了 destroyAction 方法,这个方法会指派一个 destroyAction 动作,在这个动作里面会请求服务接口,把某个内容项目删除掉 ..

刷新一下页面 .. 现在这个列表页面上就不会再显示之前被删除的内容项目了 .. 再回到 db.json 这个文件里面看一下 .. 你会发现,id 号是 1 的内容项目已经从这个文件里面删除掉了 ..

把刚才复制的内容粘贴过来 ..

删除内容项目的动作《 Nuxt.js:数据管理 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点