Day028-透过Vuex-实作简易部落格-修改文章

Vue：实做部落格最後一步骤，就是修改文章！上一篇已经了解如何将id生成，如此才可以做个别文章上的操作。原先，在Article页面上，我们可以加上一个标示，让文章可以显示，到底是新增文章，还是编辑文章：

上图，若在文章列表上选择修改，会进入到以下页面：

所以，透过是否有id传入，来判断Add_Article的页面上，显示编辑或修改，这是一种很常见的做法。我们在路由上做为些许的调整：

上图，将原本的Add_Article拆分为两种，一种为新增页面，另一种为修改编辑页面，并且允许传递参数。并且，进入修改界面前，需要将参数传递：

<td>
  <button 
    id="fixed"
    @click="$router.push(`/article/Add_Article/edit/${item.id}`)"
   >
        修改
  </button>
  <button id="delete" @click="deleteHandler(item.id)">
        删除
  </button>
</td>

点选修改後，参数传递於Add_Article页面，可以在此页面中新增props，接收id：

export default {
  props: {
    id: {},
}

在HTML上加上判断，如果有id传入，则为编辑页面，反之，为新增页面：

<h2>{{ id ? "编辑" : "新增" }}文章</h2>

如果上述都准备好了！接着就可以开始将文章传入~
传入也需要靠id来操作，因为在state里面存取了所有文章资料，唯独我们需要特定的文章：

fetchArticle() {
 const fetchArt = this.articles.filter((art) => art.id === this.id)[0];
 this.form.title = fetchArt.title;
 this.form.content = fetchArt.content;
}

设定上述方法後，我们希望在元件生成时产生：

created() {
    this.id && this.fetchArticle();
}

这样就完成文章显示於修改页面噜！

但是，光有这些还不行，原本的送出按键为新增文章。但现在，要有修改在送出了。也是透过id来判断为修改还是新增，并且在修改後，会dispatch Actions，如此，才会修改文章喔！

submitArticle() {
      if (this.id) {
        this.form.date = new Date().getTime();
        console.log("修改喔！");
        this.updateArticle({
          id: this.$route.params.id,
          newArticle: this.form,
        });
        alert("文章修改成功！");
      } else {
        this.form.date = new Date().getTime();
        this.addArticle(this.form);
        this.form = {
          title: "",
          date: "",
          content: "",
        };
        alert("文章新增成功");
      }
}

对於这边回传回mutation的部分，以往我们常用payload来做为概括性写法，但其实可以拆开来，分别对传送的表格进行资料处理：
Actions部分：

Mutation：

Vue：既然，你已经完成了简单板的部落格，现在是不是比较了解vue了呢~

待续......