基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程（十） —— 在 Vue 组件中使用 Vuex 模块

在本教程中我们将调用之前定义的 API 并使用上一篇教程中创建的 Vuex 模块，我们会在 Vue 组件中使用 Vuex 模块并加载页面所需要的数据。

第一步：设置 Home.vue 组件

在一个 API 驱动的单页面应用中，会首先加载 HTML、CSS 和 JavaScript，这意味着页面会在布局和样式加载之后才加载数据。我们所要做的就是绑定 Home 页面组件的一个声明周期钩子并加载数据，如果你对 Vue 的生命周期钩子不熟悉，可以查看其 文档 。

在 Roast 应用首页，我们希望展示咖啡店列表，所以在首页路由中我们会加载所有咖啡店数据。要实现这个目的，先打开 resources/assets/js/pages/Home.vue 页面。

在组件创建之后绑定的声明周期钩子 created() 会被调用，我们将在这个钩子函数中分配加载咖啡店的动作，具体实现代码放到下一步去编写：

<script>
    export default {
        created() {

        }
    }
</script>

第二步：分发加载咖啡店动作

由于我们需要加载所有咖啡店，所以需要在数据存储器上分发一个动作，有多种方式可以实现这一目的，不过我喜欢在全局 Vuex 数据存储器变量 $store 上调用一个方法来分发指定 action（所有 actions 定义在 resources/assets/js/modules/cafe.js 文件中），加载所有咖啡店对应的 action 是 loadCafes ，所以我们在生命周期钩子 created() 中添加如下代码：

created() {
    this.$store.dispatch( 'loadCafes' );
}

其实现的功能是使用 Vue 存储器分发 loadCafes 动作来调用 API、加载咖啡店、并将数据保存到 cafes 模块中的 cafes 数组。这样，当页面加载时，就会加载所有咖啡店数据。

第三步：将咖啡店添加到组件

接下来我们需要将数据显示出来。遗憾的是，现在在数据库中还没有任何数据，我们将在后续教程中添加数据到数据库，现在主要还是先实现功能。

在 Vuex 模块中设置的所有 getters 都会以计算属性的方式导入到 Vue 组件中，在应用首页，我们在希望获取已加载的咖啡店数据以及数据加载状态，以便给用户展示是否在加载数据。

要实现上述目的，需要两个计算属性，并且需要将其添加到 Home.vue 文件：

/**
 * 定义组件的计算属性
 */
computed: {
    // 获取 cafes 加载状态
    cafesLoadStatus(){
        return this.$store.getters.getCafesLoadStatus;
    },

    // 获取 cafes
    cafes(){
        return this.$store.getters.getCafes;
    }
}

现在，我们有了两个可以用来显示数据的计算属性，每个计算属性方法都会从 Vuex 模块中定义的 getters 里返回数据。我们可以在应用中像其他类型数据一样使用计算属性。

第四步：显示数据

现在，应用还没有定义任何 CSS 样式，我们只是编写一个关于如何显示数据的快速示例，我们会告诉用户咖啡店数据是否在加载并遍历已有的所有咖啡店。由于数据库中还没有数据，所以咖啡店数据为空，什么也不会显示，后面几篇教程将会添加咖啡店数据到数据库并为应用添加一些样式，现在我们只专注于功能代码编写。

要显示加载状态，可以添加一些元素到 Home.vue 模版：

<span v-show="cafesLoadStatus == 1">加载中...</span>
<span v-show="cafesLoadStatus == 2">数据加载成功！</span>
<span v-show="cafesLoadStatus == 3">数据加载失败！</span>

上述每个元素都会显示相应的咖啡店数据加载状态。

要遍历显示咖啡店列表，可以这么做：

<ul>
    <li v-for="cafe in cafes">{{ cafe.name }}</li>
</ul>

注：从数据库返回的每条咖啡店记录都是一个对象。

最终，我们的 Home.vue 文件内容如下：

<style>

</style>

<template>
    <div id="home">
        <span v-show="cafesLoadStatus == 1">Loading</span>
        <span v-show="cafesLoadStatus == 2">Cafes loaded successfully!</span>
        <span v-show="cafesLoadStatus == 3">Cafes loaded unsuccessfully!</span>
    </div>
</template>

<script>
    export default {
        created() {
            this.$store.dispatch( 'loadCafes' );
        },
        /**
         * 定义组件的计算属性
         */
        computed: {
            // 获取 cafes 加载状态
            cafesLoadStatus(){
                return this.$store.getters.getCafesLoadStatus;
            },

            // 获取 cafes
            cafes(){
                return this.$store.getters.getCafes;
            }
        }
    }
</script>

小结

至此，我们已经编写好单页面应用程序的完整工作系统，虽然还有很多教程有待编写，很多功能有待添加，但是我们已经为此做好了所有的基础准备工作。在下一篇教程中，我们将为应用程序添加样式代码，让其更加美观，再然后，我们将通过前端界面提交咖啡店数据，以真正完成咖啡店的增加和显示功能。

项目源码位于 Github 上： nonfu/roastapp 。