添加发布逻辑

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

src/views/articles/Create.vue

1 79 更改说明：

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

1 

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

1 发 布

 使用vuex管理文章状态：

管理文章状态

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

 

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

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

src/store/index.js

1 . 2 . 3 . 4 const state = { 5   user: ls.getItem('user'), 6   auth: ls.getItem('auth'), 7   // 所有文章状态 8   articles: ls.getItem('articles') 9 }10 11 const mutations = {12   UPDATE_USER(state, user) {13     state.user = user14     ls.setItem('user', user)15   },16   UPDATE_AUTH(state, auth) {17     state.auth = auth18     ls.setItem('auth', auth)19   },20   // 更改所有文章的事件类型21   UPDATE_ARTICLES(state, articles) {22     state.articles = articles23     ls.setItem('articles', articles)24   }25 }26 .27 .28 .29 2). 添加发布事件

2). 添加发布事件

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

src/store/actions.js

1 // 引入路由作页面跳转用 2 import router from '../router' 3  4 // 导出一个 post 事件，这里的用户参数是 { article, articleId }，article 包含文章标题和内容，articleId 是文章 ID  5 export const post = ({ commit, state }, { article, articleId }) => { 6   // 从仓库获取所有文章 7   let articles = state.articles 8  9   // 没有文章时，建一个空数组10   if (!Array.isArray(articles)) articles = []11 12   // 存在 article 时13   if (article) {14     // 因为是单用户，所以指定用户 ID 为 115     const uid = 116     // 获取用户传过来的 title 和 content17     const { title, content } = article18     // 获取当前日期19     const date = new Date()20 21     // 如果没传 articleId，表示新建文章22     if (articleId === undefined) {23       // 获取最后一篇文章24       const lastArticle = articles[articles.length - 1]25 26       if (lastArticle) {27         // 将当前 articleId 在最后一篇文章的 articleId 基础上加 128         articleId = parseInt(lastArticle.articleId) + 129       } else {30         // 将当前 articleId 在文章长度基础上加 131         articleId = articles.length + 132       }33 34       // 将当前文章添加到所有文章35       articles.push({36         uid,37         articleId,38         title,39         content,40         date41       })42     }43 44     // 更新所有文章45     commit('UPDATE_ARTICLES', articles)46     // 跳转到首页，并附带 articleId 和 showMsg 参数，showMsg 用来指示目标页面显示一个提示，我们稍后添加相关逻辑47     router.push({ name: 'Home', params: { articleId, showMsg: true } })48   }49 }

3). 引入 actions.js

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

src/store/index.js

1 import Vue from 'vue' 2 import Vuex from 'vuex' 3 import ls from '../utils/localStorage' 4 import router from '../router' 5 // 引入 actions.js 的所有导出 6 import * as moreActions from './actions' 7 . 8 . 9 .10 const actions = {11   login({ commit }, user) {12     if (user) commit('UPDATE_USER', user)13     commit('UPDATE_AUTH', true)14     router.push('/')15   },16   logout({ commit }) {17     commit('UPDATE_AUTH', false)18     router.push({ name: 'Home', params: { logout: true } })19   },20   updateUser({ state, commit }, user) {21     const stateUser = state.user22 23     if (stateUser && typeof stateUser === 'object') {24       user = { ...stateUser, ...user }25     }26 27     commit('UPDATE_USER', user)28   },29   // 使用对象展开运算符混入 moreActions30   ...moreActions31 }32 .

修改发布逻辑

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

src/views/articles/Create.vue

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