8.1. 添加帖子列表

2.5

3.0 2.6 2.5

V01 Vue.js 实战教程 - 基础篇 /

本教程最新版为 2.6，当前版本已放弃维护，请阅读最新版本！

简介

本小节中，我们将在网站首页添加一个帖子列表，并使用 Mock.js 生成测试数据。『帖子列表』用来显示所有用户的文章，其完成后的页面效果如下：

file

1、打开 src/views/Home.vue 文件，在 <script> 头部引入 mapState 辅助函数：

src/views/Home.vue

<script>
import { mapState } from 'vuex'
.
.
.
</script>

当一个组件需要获取多个状态的时候，引入 mapState 可以极大地简化写法。

2、修改 computed 对象，将指定的状态混入计算属性：

src/views/Home.vue

computed: {
  ...mapState([
    'auth',
    'user',
    'articles'
 ])
},

我们需要从 store 获取 articles，作为『帖子列表』的数据来源。

3、查找 &...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质，我们需要对课程进行收费。付费后才能观看剩余内容。购买