在 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


Vote Vote Cancel Collect Collect Cancel

<< 上一篇: 构建 Vuex 模块

>> 下一篇: 通过 Laravel Mix 将 SASS 编译到 Vue 组件