发布个人文章

添加发布逻辑

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 {
    title: '', // 文章标题
    content: '' // 文章内容
  }
},
mounted() {
  const simplemde = new SimpleMDE({...})

  // 监听编辑器的 change 事件
  simplemde.codemirror.on('change', () => {
    // 将改变后的值赋给文章内容
    this.content = simplemde.value()
  })

  // 将 simplemde 添加到当前实例，以在其他地方调用
  this.simplemde = simplemde
  // 初始化标题和内容
  this.fillContent()
},
methods: {
  // 编辑器只会自动保存文章的内容，我们需要自己保存文章的标题
  saveTitle() {
    ls.setItem('smde_title', this.title)
  },
  // 初始化标题和内容
  fillContent() {
    const simplemde = this.simplemde
    const title = ls.getItem('smde_title')

    // 如果 localStorage 有标题数据，使用它作为文章标题
    if (title !== null) {
      this.title = title
    }

    // 使用编辑器的内容作为文章内容
    this.content = simplemde.value()
  },
  // 发布
  post() {
    const title = this.title
    const content = this.content

    // 如果标题和内容都不为空，提交发布
    if (title !== '' && content.trim() !== '') {
      const article = {
        title,
        content
      }

      // 在控制台输出当前文章
      console.log(article)
      // 清除数据
      this.clearData()
    }
  },
  // 清除数据
  clearData() {
    this.title = ''
    ls.removeItem('smde_title')
    // 清除编辑的内容
    this.simplemde.value('')
    // 清除编辑器自动保存的内容
    this.simplemde.clearAutosavedValue()
  }
}
}
</script>
更改说明：

2、查找 <input v-validator.required，使用 v-model 绑定 title，并添加 input 事件处理器 saveTitle：

<input v-model.trim="title" v-validator:blur.required="{ title: '标题' }" type="text" class="form-control" placeholder="请填写标题" @input="saveTitle">

3、查找 <button class="btn btn-primary"，添加 click 事件处理器 post：

<button class="btn btn-primary" type="submit" @click="post">发 布</button>

 使用vuex管理文章状态：

管理文章状态

因为会有很地方用到文章的数据，所以我们把相关的逻辑都放到 store 里，以便使用和统一管理。

 

1). 添加状态和事件类型

打开 src/store/index.js 文件，添加 articles 和 UPDATE_ARTICLES（注释部分是涉及的修改）:

src/store/index.js

.
.
.
const state = {
  user: ls.getItem('user'),
  auth: ls.getItem('auth'),
  // 所有文章状态
  articles: ls.getItem('articles')
}

const mutations = {
  UPDATE_USER(state, user) {
    state.user = user
    ls.setItem('user', user)
  },
  UPDATE_AUTH(state, auth) {
    state.auth = auth
    ls.setItem('auth', auth)
  },
  // 更改所有文章的事件类型
  UPDATE_ARTICLES(state, articles) {
    state.articles = articles
    ls.setItem('articles', articles)
  }
}
.
.
.
2). 添加发布事件

2). 添加发布事件

在 src/store 下新建 actions.js 文件，复制贴入以下代码：

src/store/actions.js

// 引入路由作页面跳转用
import router from '../router'

// 导出一个 post 事件，这里的用户参数是 { article, articleId }，article 包含文章标题和内容，articleId 是文章 ID 
export const post = ({ commit, state }, { article, articleId }) => {
  // 从仓库获取所有文章
  let articles = state.articles

  // 没有文章时，建一个空数组
  if (!Array.isArray(articles)) articles = []

  // 存在 article 时
  if (article) {
    // 因为是单用户，所以指定用户 ID 为 1
    const uid = 1
    // 获取用户传过来的 title 和 content
    const { title, content } = article
    // 获取当前日期
    const date = new Date()

    // 如果没传 articleId，表示新建文章
    if (articleId === undefined) {
      // 获取最后一篇文章
      const lastArticle = articles[articles.length - 1]

      if (lastArticle) {
        // 将当前 articleId 在最后一篇文章的 articleId 基础上加 1
        articleId = parseInt(lastArticle.articleId) + 1
      } else {
        // 将当前 articleId 在文章长度基础上加 1
        articleId = articles.length + 1
      }

      // 将当前文章添加到所有文章
      articles.push({
        uid,
        articleId,
        title,
        content,
        date
      })
    }

    // 更新所有文章
    commit('UPDATE_ARTICLES', articles)
    // 跳转到首页，并附带 articleId 和 showMsg 参数，showMsg 用来指示目标页面显示一个提示，我们稍后添加相关逻辑
    router.push({ name: 'Home', params: { articleId, showMsg: true } })
  }
}

3). 引入 actions.js

打开 src/store/index.js 文件，引入并混入 actions.js（注释部分是涉及的修改）：

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import ls from '../utils/localStorage'
import router from '../router'
// 引入 actions.js 的所有导出
import * as moreActions from './actions'
.
.
.
const actions = {
  login({ commit }, user) {
    if (user) commit('UPDATE_USER', user)
    commit('UPDATE_AUTH', true)
    router.push('/')
  },
  logout({ commit }) {
    commit('UPDATE_AUTH', false)
    router.push({ name: 'Home', params: { logout: true } })
  },
  updateUser({ state, commit }, user) {
    const stateUser = state.user

    if (stateUser && typeof stateUser === 'object') {
      user = { ...stateUser, ...user }
    }

    commit('UPDATE_USER', user)
  },
  // 使用对象展开运算符混入 moreActions
  ...moreActions
}
.

修改发布逻辑

打开 src/views/articles/Create.vue 文件，查找 console.log(article)，改为分发 post 事件：

src/views/articles/Create.vue

// 修改
console.log(article)
// 为 => 分发 post 事件，并附带参数 { article }
this.$store.dispatch('post', { article })