编辑文章

1). 添加编辑文章路由

打开 src/router/routes.js 文件，在数组的最后面，添加编辑文章路由 Edit：

src/router/routes.js

  // Edit
  {
    path: '/articles/:articleId/edit',
    name: 'Edit',
    component: () => import('@/views/articles/Create'),
    meta: { auth: true }
  },

我们这里使用了跟 Create 一样的组件页面，但将其路径指向一个新的地址，并命名为 Edit。

2). 添加编辑入口

1、打开 src/views/articles/Content.vue 文件，复制以下代码替换原 <script>：

src/views/articles/Content.vue

<script>
import SimpleMDE from 'simplemde'
import hljs from 'highlight.js'
import emoji from 'node-emoji'
import { mapState } from 'vuex'

export default {
  name: 'Content',
  data() {
    return {
      title: '', // 文章标题
      content: '', // 文章内容
      date: '', // 文章创建时间
      uid: 1 // 用户 ID
    }
  },
  computed: {
    ...mapState([// 将仓库的以下状态混入到计算属性之中
      'auth',
      'user'
    ])
  },
  created() {
    const articleId = this.$route.params.articleId
    const article = this.$store.getters.getArticleById(articleId)
    if (article) {
      let { uid, title, content, date } = article
      this.uid = uid
      this.title = title
      this.content = SimpleMDE.prototype.markdown(emoji.emojify(content, name => name))
      this.date = date
      this.$nextTick(() => {
        this.$el.querySelectorAll('pre code').forEach((el) => {
          hljs.highlightBlock(el)
        })
      })
    }

    this.articleId = articleId
  },
  methods: {
    editArticle() {
      this.$router.push({ name: 'Edit', params: { articleId: this.articleId } })
    },
    deleteArticle() {

    }
  }
}
</script>

2、查找 <div class="markdown-body"，在其后面添加『编辑删除图标』：

<div class="markdown-body" v-html="content"></div>

<!-- 编辑删除图标 -->
<div v-if="auth && uid === 1" class="panel-footer operate">
  <div class="actions">
    <a @click="deleteArticle" class="admin" href="javascript:;"><i class="fa fa-trash-o"></i></a>
    <a @click="editArticle" class="admin" href="javascript:;"><i class="fa fa-pencil-square-o"></i></a>
  </div>
</div>

我们先判断用户是否已登录，已登录且当前用户 ID 为 1 时，渲染编辑删除图标。

3). 添加编辑文章逻辑

打开 src/store/actions.js 文件，复制以下代码替换原 post 事件：

src/store/actions.js

export const post = ({ commit, state }, { article, articleId }) => {
  let articles = state.articles

  if (!Array.isArray(articles)) articles = []

  if (article) {
    const uid = 1
    const { title, content } = article
    const date = new Date()

    if (articleId === undefined) {
      const lastArticle = articles[articles.length - 1]

      if (lastArticle) {
        articleId = parseInt(lastArticle.articleId) + 1
      } else {
        articleId = articles.length + 1
      }

      articles.push({
        uid,
        articleId,
        title,
        content,
        date
      })
    }else { // 如果有传 articleId
  // 遍历所有文章
  for (let article of articles) {
    // 找到与 articleId 对应的文章
    if (parseInt(article.articleId) === parseInt(articleId)) {
      // 更新文章的标题
      article.title = title
      // 更新文章的内容
      article.content = content
      break
    }
  }
}
    commit('UPDATE_ARTICLES', articles)
    router.push({ name: 'Content', params: { articleId, showMsg: true } })
  }
}

4). 修改创作文章页面

1、打开 src/views/articles/Create.vue 文件，复制以下代码替换原 <script>：

src/views/articles/Create.vue

<script>
import SimpleMDE from 'simplemde'
import hljs from 'highlight.js'
import ls from '@/utils/localStorage'

window.hljs = hljs

export default {
  name: 'Create',
  data() {
  return {
    articleId: undefined // 文章 ID
  }
},
beforeRouteEnter(to, from, next) {
  next(vm => {
    // 确认渲染组件的对应路由时，设置 articleId
    vm.setArticleId(vm.$route.params.articleId)
  })
},
// 在离开该组件的对应路由前
beforeRouteLeave(to, from, next) {
  // 清空自动保存的文章数据
  this.clearData()
  next()
},
watch: {
  // 监听路由参数的变化
  '$route'(to) {
    // 清空自动保存的文章数据
    this.clearData()
    // 设置 articleId
    this.setArticleId(to.params.articleId)
  }
},
methods: {
  // 填充文章数据
  fillContent(articleId) {
    // 编辑器
    const simplemde = this.simplemde
    // 自动保存的标题
    const smde_title = ls.getItem('smde_title')

    // 有 articleId 时
    if (articleId !== undefined) {
      // 获取对应文章
      const article = this.$store.getters.getArticleById(articleId)

      if (article) {
        // 获取文章的标题和内容
        const { title, content } = article

        // 有自动保存的标题时，使用自动保存的标题，否则使用文章的标题
        this.title = smde_title || title
        // 有自动保存的内容时，使用自动保存的内容，否则使用文章的内容
        this.content = simplemde.value() || content
        // 设置编辑器的内容
        simplemde.value(this.content)
      }
    } else { // 没有 articleId 时，使用自动保存的标题和内容
      this.title = smde_title
      this.content = simplemde.value()
    }
  },
  post() {
    if (title !== '' && content.trim() !== '') {
      // 在分发 post 事件时，附带 articleId 参数
      this.$store.dispatch('post', { article, articleId: this.articleId })
    }
  },
  // 设置 articleId
  setArticleId(articleId) {
    // 获取 localStorage 保存的 articleId，临时用它来判断是否还处于当前编辑页面
    const localArticleId = ls.getItem('articleId')

    // 手动在两个不同的编辑页面之间跳转时（如 /articles/1/edit 和 /articles/2/edit）时
    if (articleId !== undefined && !(articleId === localArticleId)) {
      // 清空自动保存的文章数据
      this.clearData()
    }

    // 设置当前实例的 articleId
    this.articleId = articleId
    // 填充文章数据
    this.fillContent(articleId)
    // 在 localStorage 保存一个 articleId
    ls.setItem('articleId', articleId)
  }
}
</script>

上面代码的核心就是利用路由参数的 articleId，获取对应的文章数据，来填充编辑页面。在不同的编辑页面之间跳转（如 /articles/1/edit 和 /articles/2/edit）时，因为我们会优先填充自动保存的数据，所以需要先调用 clearData 清空它们。

涉及的新知识点：

beforeRouteLeave(to, from, next) {
  this.clearData()
  next()
}

beforeRouteLeave 是组件内的守卫，在离开该组件的对应路由时调用，此时可以访问 this，需要使用 next() 确认导航。

监听 '$route'：

watch: {
  '$route'(to) {
    this.clearData()
    this.setArticleId(to.params.articleId)
  }
}

我们可以通过监听 '$route' 来得知路由参数的变化，我们通常会在两个路由都渲染相同的组件时监听 '$route'，这是因为 Vue 会复用组件实例，以导致组件内的部分钩子不再被调用。举例来说，我们的『编辑文章』和 『创作文章』都使用 Create.vue 组件，当我们从『编辑文章』导航到『创作文章』时（在编辑文章页面点击创作文章按钮），beforeRouteEnter 就不会被调用，所以我们需要监听 '$route'，以响应路由参数的变化。

2、查找 <h2 class="text-center">，作如下修改：

<!-- 修改 -->
<h2 class="text-center">创作文章</h2>
<!-- 为 -->
<h2 class="text-center">{{ articleId ? '编辑文章' : '创作文章' }}</h2>